javascript - 显示 block 与。不透明度

Question

我有一个悬停菜单，它在未使用时必须有 display:none，以便您可以单击它下面的内容。

当需要打开它时，我将显示转为 inline-block；然后使用 css transition 淡化不透明度 - 使用此代码:

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

效果很好，两者之间的延迟比for循环造成的延迟小很多。

这种行为的根源是什么？我很困惑。

Answer 1

DOM 仅在您的整个代码完成后刷新，因为它与主线程同步。

如果您使用 setTimeout 等待 1 毫秒，您所期望的将起作用:

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

https://jsfiddle.net/vtd3y5ug/