javascript - 不透明度淡化仅在延迟时有效

Question

我想让一个 div 出现淡入淡出的效果:

<div id="toto" style="background:red;width:200px;height:200px"></div>

我知道的最简单的方法是使用 CSS 属性“transition”和“opacity”。在我看来，这段代码应该有效(但它没有):

document.getElementById("toto").style.opacity = 0;
document.getElementById("toto").style.transition = "all 5s ease";
document.getElementById("toto").style.opacity = 1;

(参见:http://jsfiddle.net/87q44ysg/1/#share)

谁知道为什么？我发现了这个 hack，但我无法解释为什么它只在这种情况下有效......:

document.getElementById("toto").style.opacity = 0;
window.setTimeout(function(){
  document.getElementById("toto").style.transition = "all 5s ease";
  document.getElementById("toto").style.opacity = 1;
}, 1);

(参见:http://jsfiddle.net/36009t1x/#share)

谢谢!

Answer 1

第一个案例

document.getElementById("toto").style.opacity = 0;
document.getElementById("toto").style.transition = "all 5s ease";
document.getElementById("toto").style.opacity = 1; 

发生这种情况是因为上面的 javascript 中的每一行都会被立即调用，这类似于设置这些 css 规则:

#toto {
    opacity: 0;
    transition: all 5s ease;
    opacity: 1;
}

如您所见，第二次出现的不透明度将覆盖值 0，因此结果将为 1。

#toto {
    transition: all 5s ease;
    opacity: 1;
}

在这种情况下没有动画只有静态不透明度不会改变。

第二种情况

document.getElementById("toto").style.opacity = 0;
window.setTimeout(function(){
  document.getElementById("toto").style.transition = "all 5s ease";
  document.getElementById("toto").style.opacity = 1;
}, 1);

在这种情况下，您最初将不透明度设置为 0。在 1 毫秒后，您更改了 css 规则，因此不透明度从 0 变为 1。这就是动画被触发的原因。

问候。