title: Trigger CSS transition on appended element
body: <p>As <a href="https://stackoverflow.com/questions/8595143/perform-css3-animation-after-using-jquery-appendto">this question</a> observes, immediate CSS transitions on newly-appended elements are somehow ignored - the end state of the transition is rendered immediately.</p>
  
  <p>For example, given this CSS (prefixes omitted here):</p>
  
  <pre><code>.box { 
    opacity: 0;
    transition: all 2s;
    background-color: red;
    height: 100px;
    width: 100px;
  }
  
  .box.in { opacity: 1; }
  </code></pre>
  
  <p>The opacity of this element will be set immediately to 1:</p>
  
  <pre><code>// Does not animate
  var $a = $('&lt;div&gt;')
      .addClass('box a')
      .appendTo('#wrapper');
  $a.addClass('in');
  </code></pre>
  
  <p>I have seen several ways of triggering the transition to get the expected behaviour:</p>
  
  <pre><code>// Does animate
  var $b = $('&lt;div&gt;')
      .addClass('box b')
      .appendTo('#wrapper');
  
  setTimeout(function() {
      $('.b').addClass('in');
  },0);
  
  // Does animate
  var $c = $('&lt;div&gt;')
      .addClass('box c')
      .appendTo('#wrapper');
  
  $c[0]. offsetWidth = $c[0].offsetWidth
  $c.addClass('in');
  
  // Does animate
  var $d = $('&lt;div&gt;')
      .addClass('box d')
      .appendTo('#wrapper');
  $d.focus().addClass('in');
  </code></pre>
  
  <p>The same methods apply to vanilla JS DOM manipulation - this is not jQuery-specific behaviour.</p>
  
  <p>Edit - I am using Chrome 35.</p>
  
  <p><a href="http://jsfiddle.net/jwhitfieldseed/q34kA/" rel="noreferrer">JSFiddle</a> (includes vanilla JS example).</p>
  
  <ul>
  <li>Why are immediate CSS animations on appended elements ignored?</li>
  <li>How and why do these methods work?</li>
  <li>Are there other ways of doing it</li>
  <li><strong>Which, if any, is the preferred solution?</strong></li>
  </ul>