显示块与。不透明度答案

【问题标题】：Display Block Vs. Opacity显示块与。不透明度
【发布时间】：2016-10-09 03:55:37
【问题描述】：

我有一个悬停菜单，在不使用时必须有display:none，所以你可以点击它下面的东西。

当需要打开它时，我将显示设置为 inline-block；然后使用 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循环造成的延迟。

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

【问题讨论】：

好吧，除非你真的写了一个做动画的函数，而且定时器和其他东西可能有点复杂，或者你正在使用 CSS 动画，只是将不透明度设置为其他东西是'根本不会褪色，它只是……等待它……改变不透明度。
我显然有过渡......
这不是很明显，因为我们看不到它们。
您可以在jsfiddle.net 或同等条件下添加演示吗？

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您不能将display: none 与opacity 一起使用来实现淡入淡出效果。

使用visibility: hidden 和visibility: visible 代替display: none 和display: inline-block。

【讨论】：