title: jQuery operation with CSS transition timing issue
body: <p>I'm trying to create a sidebar animating on the margin property. I'm toggling the <code>hidden</code> HTML attribute on the sidebar to make it accessible.</p>
  
  <p>My question is: why does the animation for showing sidebar break after the 1st try? It works on subsequent tries if I add an arbitrary timeout on the <code>addClass</code>, but isn't <code>removeAttr</code> supposed to be synchronous?</p>
  
  <p><a href="http://jsbin.com/gepuxuqugi/edit?html,css,js,output" rel="nofollow">Run in JSBin</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="sidebar"&gt;&lt;/div&gt;
      &lt;div id="main"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#sidebar { 
      margin-left: -200px;
      transition: margin 0.3s ease-out;
  }
  
  #wrapper.show-aside #sidebar {
      margin-left: 0;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// Show sidebar
  $('#sidebar').removeAttr('hidden');
  $('#wrapper').addClass('show-sidebar');
  
  // Hide sidebar
  $('#wrapper').removeClass('show-sidebar');
  setTimeout(function() {
      $('#sidebar').attr('hidden', 'hidden');
  }, 300); // Wait for CSS transition to finish
  </code></pre>