title: CSS animate transition when jQuery .html() completes
body: <p>What I want to do is to append a container, fill it with content, and then animate it in by removing a class and letting CSS handle it through a transition. I'm able to do all of that except animate it in. I think it might be some kind of race condition or something similar, because if I put a setTimeout() on removing the class, it will animate in. Here's a fiddle with both examples:</p>
  
  <p><a href="http://jsfiddle.net/38q7A/3/" rel="nofollow">http://jsfiddle.net/38q7A/3/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="test1"&gt;test 1&lt;/div&gt;
  
  &lt;div class="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flyin {
       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       -o-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;
  }
  
  .left {
       position: fixed;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -o-transform: translateX(-100%);
      transform: translateX(-100%);
   }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function test1(){
       $(".container").append("&lt;div class='flyin left'&gt;&lt;/div&gt;");
       $(".flyin").html("this is test content");
       $(".flyin").removeClass("left");
  };
  </code></pre>