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

<强>问题：

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

<强>解决方案：

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

您可以看到我使用setTimout这个代码片段来制作不透明度动画的效果：

＆＃13;

//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);

＆＃13;

//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;
}

＆＃13;

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

＆＃13;

Answer 2

我在这里找到答案：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 3

像这样创建一个setTimeout window.setTimeout（function（）{div.style.opacity = 1;}，17）; 。所以动画将在下次生效。

转换不透明度在创建元素时不起作用

3 个答案: