Javascript 显示块与不透明度

我有一个悬停菜单，当它不使用时，它必须有

显示：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循环造成的延迟小得多

---

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

你不能使用

显示：无

和

不透明度

来实现淡入淡出效果

---

不要使用

display:none

和

display:inline block

使用

visibility:hidden

和

visibility:visibility

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

如果您只需等待1ms并设置超时，您所期望的将起作用：

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

---

好吧，除非你真的编写了一个可以制作动画的函数，而且它们可能会对计时器和其他东西有点复杂，或者你正在使用CSS动画，只需将不透明度设置为其他值就不会褪色，它只是。。。等等。。。。更改不透明度。我明显有过渡…这不明显，因为我们看不到它们。你能在中添加演示或等效物吗？我不是在设置显示动画，而是不透明度。谢谢你的实际回答，现在有意义了。然而，我最终还是使用了

可见性

，这是怎么回事？它以完全相同的方式使用，但会更新。请参阅：Display:none，表示该元素不在页面上。可见性：隐藏，表示元素在页面上，但不可见。