title: How display:block effects on transition:opacity?
body: <p>I have two divs. One is shown and other is hidden(using display:none).
  When i click on the first div it should slowly disappear (made with transition:opacity), then using javascript's setTimeout i make it display:none and at that time put the second div display:block and add him class (which make him visible with transition:opacity).
  The question is: why the first div has the desired effect (slowly disappears) and the second div just immediately shown after that (the transition effect doesn't work in this case).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body style="border:1px solid black"&gt;   
      &lt;div class="square red show" &gt;&lt;/div&gt;
      &lt;div class="square blue" style="display:none"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.square{
      opacity:0;
      transition: opacity 1s linear;
  }
  .square.show{
      opacity:1;
      transition: opacity 1s linear;
  }
  .red{
      background-color:red;
  }
  .blue{
      background-color:blue;
  }
  </code></pre>
  
  <p>Js</p>
  
  <pre><code>$('.red').click(function(){
          $(this).removeClass('show');
          setTimeout((function(p){return function(){
              $(p).css('display', 'none');
              $('.blue').css('display', 'block').addClass('show');
          }})(this), 1000); 
      });
  </code></pre>
  
  <p>Example is here: <a href="http://jsfiddle.net/y7cX2/" rel="nofollow">http://jsfiddle.net/y7cX2/</a>
  Thanks.</p>