title: Skip CSS transition with jQuery
body: <p>I want to skip a CSS transition under certain conditions. I'd prefer not to add special no-transition styles to my stylesheet, or duplicate my stylesheet's styles in my JavaScript. So far, the best solution I've found is</p>
  
  <pre><code>if (condition) {
    $el.css({'-webkit-transition-duration': '0s'});
    setTimeout(function() {
      $el.css({'-webkit-transition-duration': ''});
    }, 0);
  };
  $el.addClass('transitionClass');
  </code></pre>
  
  <p>(I've omitted the non-WebKit CSS for brevity. See it in action at <a href="http://jsfiddle.net/TrevorBurnham/zZBhx/" rel="noreferrer">http://jsfiddle.net/TrevorBurnham/zZBhx/</a>.)</p>
  
  <p>I don't like this because</p>
  
  <ol>
  <li>It's verbose, and</li>
  <li>It introduces potential race conditions, e.g. if another timeout is on the queue that will add or remove a class on <code>$el</code>.</li>
  </ol>
  
  <p>Is there a better way?</p>