title: Remove CSS transition, move the element, then re-apply it before moving it again
body: <p>I'm having an issue with transitions.</p>
  
  <p>I have a transition on the left property. I want to move a div from left: 860px to -860px without a transition, then move it to 0px with a transition.</p>
  
  <p>If I remove the class giving the element the transition, apply a class that gives it -860px to the left, that's good. No transition. </p>
  
  <p>However, since I want to apply a transition on it before I change left to 0px, I again add the transition class, and give it a class with left: 0. When I do this in Chrome it then applies the transition on the element on its way to the -860px position as well as to 0. So not what I want.</p>
  
  <p>I want to avoid a delay between also. But I don't think there's an event that tells me when Chrome has re-rendered the element at -860px. Any ideas?</p>
  
  <p>Here's some example code. The class with the transition: </p>
  
  <pre><code>.div-transition {
      -webkit-transition:all 0.8s ease-in-out;
      -moz-transition:all 0.8s ease-in-out;
      -o-transition:all 0.8s ease-in-out;
      transition:all 0.8s ease-in-out;
  }
  
  $(".div-to-transition").removeClass('div-transition');
  $(".div-to-transition").css('left', '-860px'); // So far so good, if I don't add the next two lines. 
  $(".div-to-transition").addClass('div-transition'); 
  $(".div-to-transition").css('left', '0'); // Now it applies a transition as we move left to -860px, AND from -860px to 0. 
  </code></pre>