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.
<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>
#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;
}
$(document).ready(function() {
//???
});
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>