61

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() {
    //???
});
2
  • Very similar question, though related to inline-block it's the same underlying issue. I couldn't find one specific to flex so I won't close as duplicate. stackoverflow.com/questions/1091322/… Mar 6, 2015 at 20:21
  • You can set "display: flex" in the CSS and inline style="display: none" in HTML
    – Beamer
    Mar 9, 2018 at 10:15

5 Answers 5

146

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>

1
  • This works very good, also good to know, you can also do it in reverse when doing something like a hover behavior, on Hover: .css("display", "flex").hide().fadeIn(); and leaving: fadeOut().hide().css("display", "none");
    – Lukas
    Feb 24, 2022 at 12:58
9

Easiest and most clean way (if you can edit DOM) is to wrap the element, and fade the wrapper while having div with flex inside

<div class="popup" id="popupContainer">
  <div class="popup__flexbox">
    <div class="popup__flex-item" id="popup">
    <div class="popup__close">
       <i class="fa fa-2x fa-times-circle"></i>
    </div>
    <h2></h2>
    <div class='popup__text'></div>
    <div class="popup__videos"></div>
    <div class="popup__images"></div>
  </div>
</div>

css:

.popup {
  display: none;
}

.popup__flexbox {
  display: flex;
}

js:

$("#popupContainer").fadeIn();
5

You can set the opacity as 0 and animate:

$('#popupContainer').animate({
    opacity: 1
}, 'fast');
5
  • 1
    This, while a good alternative would cause a big white space in your page since the box would still be in the document flow but just invisible ^.^
    – SidOfc
    Oct 21, 2015 at 9:14
  • This was the solution I was looking for. I could have an element already styled with opacity: 0; and then just animate it. No need to flip-flop on the display setting - that was causing glitching / flashing for me. Mar 1, 2016 at 15:20
  • Some older versions of jQuery seem to set the display style in the fadeTo function, so I had to give up that shortcut and do it this way
    – brichins
    Jan 12, 2017 at 19:07
  • If the content is appearing on top of another element you might have to add visibility: hidden; or pointer-events: none;
    – Lasithds
    Jul 28, 2017 at 7:19
  • You probably don't want something like a conditional 'submit' button to just / be there / but be invisible. Nov 25, 2017 at 20:32
1

var flex = $('#flex');

console.log(flex.css('display'));

flex.hide();

flex.velocity('fadeIn', {duration: 100, display: 'flex'});

setTimeout(function(){
  console.log(flex.css('display'));
 }, 100);
#flex{
  display: 'flex'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>

<div id="flex"></div>

1

Best CSS only solution for fadeIn or jQuery show to display flex is that:

.fadeIn.fadeFlex[style*='display: block']{
    display: flex !important;
}
<div class="row fadeIn fadeFlex">
...
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.