title: how fade in a flex box?
body: <p>How do I get a flex box to not be part of the page until I fade it in? I used to do this with 'display: 0;' and then use jQuery .fadeIn(). But now if I set display to 0, when I fade it in, of course I lose the flex-iness of the box. If I use jQuery to set display to flex, then it will just appear, not fade in.</p>
  <h2>HTML</h2>
  <pre><code>&lt;div class=&quot;&quot; id=&quot;popupContainer&quot;&gt;
      &lt;div class=&quot;flex-item-popup&quot; id=&quot;popup&quot;&gt;
          &lt;div class=&quot;close&quot;&gt;&lt;i class=&quot;fa fa-2x fa-times-circle&quot;&gt;&lt;/i&gt;&lt;/div&gt;
          &lt;h2&gt;&lt;/h2&gt;
          &lt;div class='text'&gt;&lt;/div&gt;
          &lt;div class=&quot;videos&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;flex-container images&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h2>CSS</h2>
  <pre><code>#popupContainer {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      align-items: center;
      z-index: 15;
  }
  </code></pre>
  <h2>jQuery</h2>
  <pre><code>$(document).ready(function() {
      //???
  });
  </code></pre>