jquery - tutorial - justificación de la caja flexible espacio alrededor

¿Cómo se desvanecen en una caja flexible?

Question

¿Cómo consigo que un cuadro flexible no forme parte de la página hasta que lo desaparezca? Solía ​​hacer esto con ''display: 0;'' y luego usar jquery .fadeIn (). Pero ahora, si configuro la pantalla en 0, cuando lo desaparezco, por supuesto pierdo la flexibilidad de la caja. Si uso jquery para configurar la pantalla para que se flexione, solo aparecerá, no se desvanecerá.

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

jquery

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

Answer 1

La forma más fácil y más limpia (si puede editar DOM) es envolver el elemento y desvanecer el envoltorio mientras tiene div con flex dentro

<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();

Answer 2

Parece un poco extraño, pero lo que puedes hacer es en el css, configúralo para que display: none . Luego, el truco es configurar la display para que se flex en su jQuery y luego esconderla, luego fadeIn :

CSS :

#popupContainer {
    /* ... */

    display:none;
    flex-direction: row;
    flex-wrap: wrap;

    /* ... */
}

JS :

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

Esto funciona porque fadeIn() el elemento a su valor de display no oculto anterior. Por lo tanto, establecer la configuración flex y volver a ocultarlo establecerá este "valor predeterminado" para que se establezca nuevamente.

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>

Answer 3

Puedes establecer la opacidad como 0 y animar:

$(''#popupContainer'').animate({
    opacity: 1
}, ''fast'');

Answer 4

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>