how fade in a flex box?

Question

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.

HTML

<div class="" id="popupContainer">     <div class="flex-item-popup" id="popup">         <div class="close"><i class="fa fa-2x fa-times-circle"></i></div>         <h2></h2>         <div class='text'></div>         <div class="videos"></div>         <div class="flex-container images"></div>     </div> </div> 

CSS

#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; } 

jQuery

$(document).ready(function() {     //??? }); 

Answer 1

It seems a bit odd, but what you can do is in the css, set it to display: none. Then the trick is to set the display to flex in your jquery and then hide it again, then fadeIn:

CSS:

#popupContainer {     /* ... */      display:none;     flex-direction: row;     flex-wrap: wrap;      /* ... */ } 

JS:

$("#popupContainer")     .css("display", "flex")     .hide()     .fadeIn(); 

This works because fadeIn() will set the item back to its previous non-hidden display value. So setting flex and re-hiding it will set this "default" for it to be set back to.

http://jsfiddle.net/z2kxyjcq/1/

$("#popupContainer")      .css("display", "flex")      .hide()      .fadeIn(2000);

#popupContainer {      position: absolute;      left: 0;      top: 0;      width: 100%;      height: 100%;      display:none;      flex-direction: row;      flex-wrap: wrap;      justify-content: center;      align-content: flex-start;      align-items: center;      z-index: 15;      background-color: red;  }  #popupContainer *{      border: 1px solid blue;  background-color: white;      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="" id="popupContainer">  <div class="flex-item-popup" id="popup">      <div class="close"><i class="fa fa-2x fa-times-circle">1</i></div>      <h2>2</h2>      <div class='text'>a</div>      <div class="videos">b</div>      <div class="flex-container images">c</div>  </div>