title: Class is changed before style
body: <p>See the following snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('div').click(function(){
    $(this).css('width', '10px').addClass('wide');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {width: 100px; height: 100px; background-color: green;}
  div.wide {width: 200px !important; transition: width 2s;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would expect the style to be applied first, making it 10px wide, and then the class to be added causing it to expand to 200px. However this isn't the case. If you look in the inspector you can see the class attribute being changed before the style attribute. Why is this and how can I make it work the right way?</p>
  
  <p>Thanks!</p>