title: Force browser to trigger reflow while changing CSS
body: <p>I am building non-jQuery responsive image slider based on CSS3 transitions.</p>
  
  <p>The structure is simple: a viewport and inside relatively positioned UL with left floated LIs.</p>
  
  <p>I am facing a problem in such situation:</p>
  
  <ol>
  <li>User clicks "prev" arrow.</li>
  <li>JS appends proper LI before currently displayed LI node.</li>
  <li>For now UL has set CSS transition as <code>none 0s linear</code> to prevent animation changes. In this moment I decrease UL CSS left value by slider width (let's say: from 0px to -1200px) to make view the same as it was.</li>
  <li>Now I am changing UL's transition property to <code>all 0.2s ease-out</code>.</li>
  <li>Now I am changing UL's left property to trigger CSS3 animation. (let's say: from -1200px to 0px).</li>
  </ol>
  
  <p>What is the problem? Browser simplifies changes and does not make any animations.</p>
  
  <p>Stoyan Stefanov wrote about reflow problem at his blog <a href="http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/" rel="noreferrer">here</a>, but in this case trying to force a reflow on element doesn't work.</p>
  
  <p>This is a piece of code doing this (I skipped browser prefixes for simplification):</p>
  
  <p><code>ul.style.transition = 'none 0s linear 0s';</code>
  <code>ul.style.left = '-600px';</code>
  <code>ul.style.transition = 'all 0.2s ease-out';</code>
  <code>ul.style.left = '0px';</code></p>
  
  <p>Here is fiddle to see problem in action: <a href="http://jsfiddle.net/9WX5b/1/" rel="noreferrer">http://jsfiddle.net/9WX5b/1/</a></p>