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添加過渡。 不會期望引擎在檢測到目標屬性之前做出一些延遲。