title: Transition when removing class with display: none
body: <p>I have a list of divs, some of them are hidden through <code>class: "not-updated"</code> while others are visible.</p>
  
  <pre><code>.not-update{
              display: none
  }
  </code></pre>
  
  <p>At a certain point, due to some AJAX calls, some of the hidden divs might show up, by removing the <code>class: "not-updated"</code>.</p>
  
  <p>However, I would like that they appear with a transition, similarly to what happens with <code>.fadeTo("slow", 1)</code>.</p>
  
  <p><a href="https://jsfiddle.net/J0ANMM/gm3Lb02y/" rel="nofollow noreferrer">Here is a jsfiddle</a> that might help to understand better the situation. In this example, for simplification, it will only appear one div, but in reality it could be several of them and randomly.</p>
  
  <h2>Trials</h2>
  
  <p>As you will see, I tried <a href="https://stackoverflow.com/a/7317489/5802289">this suggestion</a>, without success:</p>
  
  <pre><code>.box{
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  </code></pre>
  
  <p><a href="https://stackoverflow.com/a/18303007/5802289">This one</a> also did not help:</p>
  
  <pre><code>$(this).removeClass('not-updated',1000);
  </code></pre>
  
  <p>Any idea of how to achieve it?</p>