显示块与不透明度

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

它工作正常，两者之间的延迟远小于for循环引起的延迟。

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

Answer 1

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

如果您只是使用setTimeout等待1ms，那么您所期待的将会有效：

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。