title: css transitions on new elements
body: <p>I cannot find a way to use css transitions on newly created dom elements.</p>
  
  <p>let's say I have an empty html document.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;p&gt;&lt;a href="#" onclick="return f();"&gt;click&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I also have this css</p>
  
  <pre class="lang-css prettyprint-override"><code>#id {
      -moz-transition-property: opacity;
      -moz-transition-duration: 5s;
      opacity: 0;
  }
  
  #id.class {
      opacity: 1;
  }
  </code></pre>
  
  <p>and this js</p>
  
  <pre><code>function f() {
      var a = document.createElement('a');
      a.id = 'id';
      a.text = ' fading in?';
      document.getElementsByTagName('p')[0].appendChild(a);
      // at this point I expect the span element to be with opacity=0
  
      a.className = 'class';
      // now I expect the css transition to go and "fade in" the a        
  
      return false;
  }
  </code></pre>
  
  <p>but, as you can see on <a href="http://jsfiddle.net/gwxkW/1/" rel="nofollow noreferrer">http://jsfiddle.net/gwxkW/1/</a> when you click the element appears instantaneously.</p>
  
  <p>If I try to set the class in a <code>timeout()</code> i <em>often</em> find the result, but to me it seems more a race between javascript and the css engine. Is there some specific event to listen? I tried to use <code>document.body.addEventListener('DOMNodeInserted', ...)</code> but it's not working.</p>
  
  <p>How can I apply css transitions on newly created elements? </p>