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

你必须在设置过渡属性后给予延迟，

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

DEMO

或者最好的方法是通过 css 添加该转换。这不会期望引擎在检测到目标属性之前会有一些延迟。