title: Immediately trigger transition after element created
body: <p>I'm trying to create an action where a div is created and immediately "floats" upwards until it's off-screen.</p>
  
  <p>To accomplish this I'm attempting to use a CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" rel="nofollow">transition</a>, which will be completely driven by JavaScript (due to limitations in my use-case).</p>
  
  <p>A problem occurs when I create an element, assign it it's transition style properties, and then immediately try to kick-off the transition by making a style change (<code>top</code>).</p>
  
  <p>It looks like a timing issue is happening where the <code>top</code> style change is firing before the transition becomes available and thus simply moving my div off-screen immediately, rather than actually performing the transition.</p>
  
  <p>Here's a simplified example:</p>
  
  <pre><code>var
      defaultHeight = 50,
      iCount = 0,
      aColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
  
  function createBlock() {
      var testdiv = document.createElement('div');
      testdiv.className = 'testdiv';
      document.body.appendChild(testdiv);
      testdiv.style.left = '50%';
      testdiv.style.backgroundColor = aColors[iCount % aColors.length];
      testdiv.style.width = defaultHeight + 'px';
      testdiv.style.height = defaultHeight + 'px';
      testdiv.style.fontSize = '30px';
      testdiv.style.textAlign = 'center';
      testdiv.innerHTML = iCount;
      testdiv.style.top = '500px';
      testdiv.style.position = 'absolute';
      iCount++;
      return testdiv;
  }
  
  document.getElementById('go').onclick = function() {
      var testdiv = createBlock();
  
      testdiv.style.transition = "top 2.0s linear 0s";
  
      setTimeout(function() {
          testdiv.style.top = (defaultHeight*-2) + 'px';
      }, 0); // &lt;- change this to a higher value to see the transition always occur
  };
  </code></pre>
  
  <p>When the "go" button (<a href="http://jsbin.com/nebuwehabi/edit?html,js,output" rel="nofollow">see JSBin</a>) is clicked rapidly the div only appears sporadically (presumably due to the timing issue described above).</p>
  
  <p>If you increase the <code>setTimeout</code>'s delay value you can see the transition almost always work.</p>
  
  <p>Is there a way to deterministically kick off a transition immediately after creating an element (without having to resort to a delay)?</p>