Блок отображения Vs. Непрозрачность

Question

У меня есть меню для наведения, которое должно иметь display:none, пока оно не используется, поэтому вы можете щелкнуть предметы под ним.

Когда придет время открыть его, я поворачиваю дисплей на встроенный блок; а затем исчезают в непрозрачности с помощью перехода CSS - с помощью этого кода:

elm.onmouseover = function(){ 
    menu.style.display = "inline-block"; 
    menu.style.opacity = 1; 
}; 

Когда этот код мчит, элемент выскочит прямо без замирания.

Моя теория о том, что Javascript работает так быстро, что элемент не изменился тип дисплея по времени изменения непрозрачности пинает в, так что я сделал это:

elm.onmouseover = function(){ 
    menu.style.display = "inline-block"; 
    for (var i=1000...; i--;); 
    menu.style.opacity = 1; 
}; 

Теперь явно ждет; однако, по-прежнему появляется без выцветания.

Я вошел в мою консоль и побежал:

menu.style.display = "inline-block"; 
menu.style.opacity = 1; // run 
> return message 

и не работал; Однако, когда я разделил заявления на два, как этот

menu.style.display = "inline-block"; // run 
> return message 

menu.style.opacity = 1; // run 
> return message 

Он отлично работает, и задержка между ними гораздо меньше, чем тот, вызванным для цикла.

В чем корень этого поведения? Я озадачен.

Answer 1

DOM только обновляется, как только весь ваш код заканчивается, потому что он синхронизируется с основной нитью.

Если вы просто подождать 1мс с SetTimeout, что вы ожидаете, будет работать:

elm.onmouseover = function() { 
    menu.style.display = 'inline-block'; 
    setTimeout(function() { 
     menu.style.opacity = 1; 
    }, 1); 
} 

https://jsfiddle.net/vtd3y5ug/

Answer 2

Вы не можете использовать display: none с opacity для эффекта затухания.

Вместо display: none и display: inline-block использовать visibility: hidden и visibility: visible.