title: Fading in via CSS transition doesn't work properly
body: <p>I'm trying to <code>animate</code> a page element using CSS <code>transition</code> on <code>opacity</code> property. Fading out works properly, but Fading in doesn't. What am I doing wrong?</p>
  
  <p><strong>Some facts are really strange</strong>:</p>
  
  <ul>
  <li>Without using <code>.no-display</code> class everything works as expected (but I should use it).</li>
  <li>Replaying function's commands in browser console <em>does work</em> as expected (but function does not).</li>
  </ul>
  
  <p><strong>The code:</strong></p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;p&gt;&lt;a href="javascript:fadeIn()"&gt;Fade in&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href="javascript:fadeOut()"&gt;Fade out&lt;/a&gt;&lt;/p&gt;
  &lt;div class="no-display invisible" id="square"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code>.no-display {
      display: none;
  }
  
  .invisible {
      opacity: 0;
  }
  
  #square {
      width: 500px;
      height: 500px;
      background-color: red;
      border: 1px solid black;
  
      -webkit-transition: opacity 2s ease;
      -moz-transition: opacity 2s ease;
      -ms-transition: opacity 2s ease;
      -o-transition: opacity 2s ease;
      transition: opacity 2s ease;
  }
  </code></pre>
  
  <p><em>JavaScript</em></p>
  
  <pre><code>function fadeIn() {
      square.classList.remove("no-display");
      square.classList.remove("invisible");
  }
  
  function fadeOut() { 
      square.classList.add("invisible");
      setTimeout(function() { square.classList.add("no-display"); }, 2000 );
  }
  </code></pre>
  
  <p><strong>Or:</strong> <a href="http://jsfiddle.net/V2Sar/6/" rel="nofollow">http://jsfiddle.net/V2Sar/6/</a>.</p>
  
  <p>Note, I can't use any frameworks such as jQuery. I have to work only with pure JavaScript.</p>