title: Fade in dynamically generated content with Bootstrap 3
body: <p>I've read <a href="https://stackoverflow.com/q/7676356/388639">several</a> <a href="https://stackoverflow.com/q/18756981/388639">similar</a> <a href="https://stackoverflow.com/q/10405531/388639">questions</a> on SO regarding Bootstrap's <code>fade</code> classes, but none of them seem to address my issue.</p>
  
  <p>I understand that the fade animation in Bootstrap 3 works by switching <code>opacity</code> between <code>0</code> and <code>1</code> when you add the <code>.in</code> class to an element that already has a <code>.fade</code> class.  This works fine for me when dealing with an element that already exists in the HTML (for example, <a href="http://jsfiddle.net/QAz2U/3/" rel="nofollow noreferrer">this JS Fiddle demo</a>).</p>
  
  <p>The problem is that the transition doesn't seem to happen when the element is created dynamically with Javascript. For example, the following code will create and display an alert, but the CSS transition doesn't happen (tested in both Chrome and Firefox). If I manually add and remove the <code>in</code> class in Dev Tools, the fade works fine:</p>
  
  <pre><code>$('&lt;div class="alert fade"&gt;This is a test&lt;/div&gt;')
    .appendTo($someElement)
    .addClass('in');
  </code></pre>
  
  <p>Clearly the <code>.addClass()</code> function is working because the alert gets the <code>in</code> class and is displayed, but the transition doesn't happen.  Any idea how I can get it to work?</p>
  
  <p>For an editable demo, see <a href="http://codepen.io/mlms13/pen/Igqmn" rel="nofollow noreferrer">this pen on CodePen</a>.</p>