创建元素时过渡不透明度不起作用[重复]

Question

从 0 到 1 的过渡不透明度不起作用。这是我的代码：https://jsfiddle.net/ax4aLhjq/19/

//html
<div id="a">
  <div style="height:20px"></div>
</div>

//css
#a{
  width:200px;
  background-color:salmon;
  margin:0px;
  padding:0px;
  height:200px;
  overflow: auto;
}

#a .item{
  margin:0px 5px;
  background-color:teal;
  padding:10px;
  color:white;
  opacity:0;
  transition:opacity .5s ease-in-out;
}

//js
function add(){

  var div = document.createElement("div");
  div.className ="item";
  var newtext = document.createTextNode("aa");
  div.appendChild(newtext);
  document.querySelector("#a").appendChild(div);


  var separator = document.createElement("div");
  separator.style.height="10px";
  document.querySelector("#a").appendChild(separator);


  //apply opacity
  div.style.opacity=1;


}
setInterval(add,3000);

我是不是做错了什么？

Answer 1

我在这里找到了答案：https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/ 似乎当添加一个元素时，需要重新绘制，并且浏览器正在尝试优化计算，并且在同一循环中执行 opacity=0 和 opacity=1。 解决方案是使用getComputedStyle：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

" getComputedStyle() 结合访问属性值 实际上刷新所有挂起的样式更改并强制布局 引擎来计算我们的当前状态”

var elem = document.createElement("div");
document.body.appendChild(elem);

// Make the element fully transparent.
elem.style.opacity = 0;

// Make sure the initial state is applied.
window.getComputedStyle(elem).opacity;

// Fade it in.
elem.style.opacity = 1;

Answer 2

问题：

您在创建元素的同时将opacity设置为1。

解决方案：

您必须延迟显示元素的动作，您需要在超时内设置不透明度以产生动画效果，否则所有元素都将被附加。

可以看到这个sn-p我用了setTimout来制作不透明动画的效果：

//js
function add(){

  var div = document.createElement("div");
  div.className ="item";
  var newtext = document.createTextNode("aa");
  div.appendChild(newtext);
  document.querySelector("#a").appendChild(div);


  var separator = document.createElement("div");
  separator.style.height="10px";
  document.querySelector("#a").appendChild(separator);


  //apply opacity
  setTimeout(function(){
      div.style.opacity=1;
  }, 2000);


}
setInterval(add,1000);

//css
#a{
  width:200px;
  background-color:salmon;
  margin:0px;
  padding:0px;
  height:200px;
  overflow: auto;
}

#a .item{
  margin:0px 5px;
  background-color:teal;
  padding:10px;
  color:white;
  opacity:0;
  transition:opacity .5s ease-in-out;
}

<div id="a">
  <div style="height:20px"></div>
</div>

Answer 3

像这样创建一个 setTimeout window.setTimeout(function(){div.style.opacity=1;},17);。所以动画会在下一次生效。