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: 
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;

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