Transition opacity does not work when creating an element

Question

the opacity of the transition from 0 to 1 does not work. 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 found the answer here: https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/ It seems that when an element is added, it needs to be redrawn and somehow the browser tries to optimize calculation and does opacity = 0 and opacity = 1 in the same loop. The solution is to use getComputedStyle : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

"getComputedStyle () in combination with access to the property value actually discards all pending style changes and forces the layout engine to calculate our 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 set the opacity to 1 at the same time that you created the element.

Decision:

You need to postpone the action showing the element, you need to set the opacity during the timeout to make the animation effect, otherwise all the elements will just be added.

You can see this snippet that I used setTimout to make an opaque animation effect:

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

Create setTimeout like this window.setTimeout (function () {div.style.opacity = 1;}, 17) ;. Thus, the animation will act next time.