title: JavaScript: Trigger CSS Transition with window.setTimeout
body: <p>This is (obviously) part of a bigger project, but I am trying to trigger a CS transition on <code>setTimeout</code>.</p>
  
  <p>(I know about using CSS animations, but this is not just about repeated transitions).</p>
  
  <p>A CSS transition will occur when a property changes. For my own purposes, I use <code>setAttribute</code> as that isolates the behaviour from other class-related stuff, but the behaviour below works the same.</p>
  
  <p>Assuming the HTML and other code is in place, here is simplified version:</p>
  
  <pre><code>var test=document.querySelector('div#test');    
  window.setInterval(doit,4000);
  function doit() {
      test.removeAttribute('thing');
      test.innerHTML=new Date();
      test.setAttribute('thing',null);
  }
  </code></pre>
  
  <p>The CSS is:</p>
  
  <pre><code>div#test {
      opacity: 0;
  }
  div#test[thing] {
      transition: opacity 1s;
      opacity: 1;
  }
  </code></pre>
  
  <p>The trick I am trying is to change clear the attribute and then set it again — that should trigger the CSS change. It doesn’t work as above. However, <em>if I delay setting the attribut by 0 seconds</em>, it does work:</p>
  
  <pre><code>function doit() {
      test.removeAttribute('thing');
      window.setTimeout(function() {
          test.setAttribute('thing',null);
      },0);
      test.innerHTML=new Date();
  }
  </code></pre>
  
  <p>The question is: why does it not work unless I add this minuscule delay, and is there a better way to do this?</p>
  
  <p>I would like an answer <em>without</em> jQuery.</p>
  
  <p>Note: I have accepted an answer below. The following code will work:</p>
  
  <pre><code>function doit() {
      test.removeAttribute('thing');
      test.offsetHeight;                  //  force update
      test.innerHTML=new Date();
      test.setAttribute('thing',null);
  }
  </code></pre>
  
  <p>Thanks</p>