transition opacity not working when creating element [duplicate]

Question

transition opacity from 0 to 1 is not working. here is my code: 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);

Am I doing something wrong?

Answer 1

I've found the answer here: https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/ It appears that when an element is added, repaint is needed and somehow the browser is trying to optimize the computation, and is doing the opacity=0 and opacity=1 in the same cycle. The solution is to use getComputedStyle : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

" getComputedStyle() in combination with accessing a property value actually flushes all pending style changes and forces the layout engine to compute our ’s current state"

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

Problem:

You are setting the opacityto 1 the same time you were creating the element.

Solution:

You have to delay tha action of showing the element, you need to set the opacity within a timeout to make the animation effect otherwise all elements will be just appended.

You can see this snippet I used a setTimoutto make the effect of the opacity animation:

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