title: How to apply CSS changes in order?
body: <p>I sometimes come across cases where I want to apply several changes to the CSS in immediate succession, making sure that each one is registered by the renderer.</p>
  
  <p><a href="https://codepen.io/Tobl/pen/KrAYrm" rel="nofollow">Here's a simplified example</a></p>
  
  <p>The height of the element is auto, so it can't be transitioned from. So I'd want to set the elements height to the current computed height and then immediately change the class to start the transition. If that happens in the next line of code, the css-renderer doesn't have time to react to the first change and it is as if only the class was changed -> no transition.</p>
  
  <pre><code>var foo = $(".foo");
  foo[0].addEventListener("click", function(ev){
    foo.css({"height":foo.height()+"px"});
    foo.addClass("active");
  });  //this doesn't work, foo.css…' is ignored.
  </code></pre>
  
  <p>We can delay to the smallest animatable timestep with <code>window.requestAnimationFrame()</code>, however, due to browser differences these already need two nested calls to support Firefox.</p>
  
  <pre><code>var dan = $(".dan");
  dan[0].addEventListener("click", function(ev){
    window.requestAnimationFrame(function(){
      dan.css({"height":dan.height()+"px"});
      window.requestAnimationFrame(function(){
        dan.addClass("active");
      });
    });
  });  //this does work (afai can tell), but feels overdone with all that nesting.
  </code></pre>
  
  <p>Technically, this code works. I'm just wondering if this is really the best way to chain css changes like this or if there are other methods.</p>