div的JavaScript褪色效果

Question

这是我的代码：

var elem = document.getElementById("script_"+el);
elem.style.opacity = 0.5;
elem.style.transition = "opacity 1s";

然后我在代码中下来

elem.style.opacity = 1;

我期望div首先加载不透明度（0.5），然后加载更高的不透明度并添加过渡效果，然后从不透明度0.5-> 1移开，我在JavaScript教程中看到了这种情况，但这似乎不是为我的div和我的内容工作。

Answer 1

设置transition属性后，您必须延迟一下，

  var elem = document.getElementById("script_"+el);
  elem.style.opacity = 0.1;
  elem.style.transition = "opacity 1s";
  setTimeout(function(){ elem.style.opacity = 1;} , 50);

演示

或最好的方法是通过CSS添加过渡。 不会期望引擎在检测到目标属性之前做出一些延迟。