Triggering a CSS transition from jQuery ajax.done()
<p>I am trying to transition-in a new page using ajax and everything is working fine except that the CSS transition is not animating correctly. More specifically, I have an <code>&lt;a&gt;</code> element that when clicked fires an ajax <code>POST</code> request to my server. The server sends back an HTML file that is appended to the <code>body</code> of my document using jQuery's <code>.done()</code> deferred object method. However, when I add the CSS class to the new HTML that will make it transition into the browser viewport the style changes are applied instantly rather than being animated. If I execute <code>.addClass()</code> after a 1ms timeout the animation executes correctly. I assume the problem has something to do with the DOM not being fully finalized by the time my class is added, but I haven't been able to fix it without using <code>.setTimeout()</code>. While this is a simple-enough fix, it doesn't seem very robust, and it still means that there is something I don't understand about the process. Any tips are definitely appreciated.</p>

<p>Here are the relevant bits of code:</p>

<p>index.html</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Intercepting Link Clicks&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="app.css"&gt;
    &lt;script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id = 'firstScene'&gt;
    &lt;a href="/server/" id = 'serverRequestLink'&gt;Get Stuff From The Server&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>
</p>

<p>app.js</p>

<pre><code>$(document).ready(app);

function app () {    

$('#serverRequestLink').on('click', getServerStuff);
};

function getServerStuff (e) {
    e.preventDefault();
    $.ajax({
    method: 'POST',
    url: 'ajaxTest',
}).done(function(secondSceneHTML){
    $('body').append(secondSceneHTML);
    $('#secondScene').addClass('visible');
});
};
</code></pre>

<p>secondScene.html</p>

<pre><code>&lt;div id = 'secondScene'&gt;
    &lt;p&gt;I'm the second scene.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>app.css</p>

<pre><code>#secondScene {
background-color: blue;
position: fixed;
top: 0;
bottom: 0;
left:200px;
right: 0;
transition: all 1s;
}

#secondScene.visible {
top: 0; right: 0; bottom: 0; left: 0;
}
</code></pre>