title: How can i animate display: none / block property on flex items?
body: <p>Is there any way to animate <code>display: block/none</code> ?</p>
  
  <p>When clicking on <code>div1</code> and <code>div 4</code> - I want to animate div's 2 and 3 respectively, (perfect would be to achieve also some nice transitions), while keeping them within a flex <code>.container</code>  </p>
  
  <p>So far, i can animate <code>visibility</code> and <code>opacity</code> (but in this case divs '2 and '3 while not-visible, still take space within <code>.container</code>) OR switch <code>display: none</code> to <code>block</code> (but then i lose <code>transition</code> of items).</p>
  
  <p>I tried positioning inner div's <code>absolute</code>'ly, but then all responsiveness goes to hell...</p>
  
  <p>Here's CodePen:
  <a href="http://codepen.io/adamTrz/pen/jWOJMj" rel="nofollow">http://codepen.io/adamTrz/pen/jWOJMj</a></p>