Question

我想让div显示淡入淡出效果：

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

我所知道的最简单的方法是使用CSS属性＆＃34; transition＆＃34;和＆＃34;不透明度＆＃34;。在我看来，这段代码应该有效（但它没有）：

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）

任何人都知道为什么？我找到了这个黑客，但我无法解释为什么它只适用于这种情况......：

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.并且在1ms后更改css规则，因此不透明度从0更改为1.这就是动画被触发的原因。

问候。

Answer 2

你应该避免在普通的Javascript中设置样式并将其移动到CSS。至于你的问题，它没有标准化，每个浏览器都可以做任何开发人员认为正确的事情。可能在重排或类似事件之前，transition属性并未真正应用。有关更详细的测试，请参阅此问题：Clean way to programmatically use CSS transitions from JS?

Answer 3

你需要玩这个超时。

试试这个： DEMO

根据需要使用值，以达到理想的效果。

你可以用setInterval获得相同的结果，但我更喜欢这个中的setTimeout。

  /*Fades in an element. Params: A DOM Element*/
  var fade = function (node) {
    var level = 0;
    var step = function ( ) {
      node.style.opacity = level;
      if (level < 1) {
        level += 0.1;
        setTimeout(step, 50); //increase the value by 0.1 every 50ms
      }
    };
    setTimeout(step, 0); //calls immidiatelly (4ms after)
  };
  fade(document.body);

干杯！

Answer 4

这很好，有帮助吗？

＆＃13;

setTimeout(function() {document.getElementById("toto").style.opacity = "1";},500);

＆＃13;

#toto {
    transition: opacity 5s;
    opacity: 0;
}

＆＃13;

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

＆＃13;

不透明度淡化仅在延迟时才起作用

4 个答案: