title: Animate an element that had display: none?
body: <p><strong>How can I make a hidden element unhidden and transition?</strong></p>
  
  <p><strong>Example:</strong></p>
  
  <p>I want to animate a <code>&lt;div&gt;</code> that has <code>display: none; height: 0px; transition: height 600ms;</code>.  </p>
  
  <p>So on click I add a class with <code>display: block; height: 100px;</code>.</p>
  
  <p>The height does not animate. </p>
  
  <p><strong><a href="http://codepen.io/donpinkus/pen/qaoZoG" rel="nofollow">CodePen</a></strong></p>
  
  <p>I would prefer a solution that uses <code>transition</code>, but if none is available I can use <code>animation</code>. I am not looking for any answers that use javascript.</p>