transition opacity not working when creating element

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?

Thanks. I've updated the post, but the problem still persists. — Doua Beri, Aug 02 '16 at 23:01

score 7 · Accepted Answer · answered Aug 03 '16 at 01:27

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;

Sadly https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/ no longer exists :( — Nick, Oct 05 '22 at 11:55

cнŝdk · Answer 2 · 2016-08-02T23:24:25.860

4

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>

edited Aug 02 '16 at 23:24

answered Aug 02 '16 at 23:11

cнŝdk

31,391
7
56
78

I had a feeling that was the problem. is it because when you add an element , you add it with opacity=1 and no transition is required? – Doua Beri Aug 02 '16 at 23:20
Yes, in fact you were adding the element and giving it `opacity=1` at the same time. – cнŝdk Aug 02 '16 at 23:22
strange. because I add the element to the DOM then change opacity. – Doua Beri Aug 02 '16 at 23:27
@DouaBeri, there's no `then` here because the two actions are made in the same time interval. – cнŝdk Aug 03 '16 at 07:58
Yeah. I realized that after I did more digging. – Doua Beri Aug 03 '16 at 09:13

score 0 · Answer 3 · answered Aug 03 '16 at 02:19

0

Make a setTimeout like this window.setTimeout(function(){div.style.opacity=1;},17);. So the animation will effect next time.

answered Aug 03 '16 at 02:19

billchen

21
2

Thanks. that solution was already provided, but it seems is not 100% bullet proof. Check this: https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/ – Doua Beri Aug 03 '16 at 07:15

transition opacity not working when creating element

3 Answers3