¿es posible animar inserciones y eliminaciones de flexbox?

Question

Cuando elimino un elemento de un flexbox, los elementos restantes "se ajustan" en sus nuevas posiciones inmediatamente en lugar de animar.

Conceptualmente, dado que los artículos están cambiando sus posiciones, esperaría que las transiciones se apliquen.

que ha establecido la propiedad de transición en todos los elementos implicados (el FlexBox y los niños)

¿Hay alguna manera de animar ediciones (añade & borra) a un FlexBox? Esto es en realidad un disparate para mí y la única pieza que falta con flexbox.

Answer 1

Recuerde que las especificaciones del Modelo de caja flexible y del Diseño de cuadrícula cambian constantemente, incluso las propiedades y los valores válidos. Las implementaciones del navegador están lejos de ser completas también. Una vez dicho esto, puede realizar la transición en la propiedad flex para que los elementos se transfieran sin problemas, luego simplemente escuche el TransitionEnd para eliminar finalmente el nodo del árbol DOM.

Aquí es un ejemplo jsFiddle, que se ejecuta en Chrome 21: http://jsfiddle.net/5kJjM/ (haga clic en el div media)

var node = document.querySelector('#remove-me'); 
 

 
node.addEventListener('click', function(evt) { 
 
    this.classList.add('clicked'); 
 
}, false); 
 

 
node.addEventListener('webkitTransitionEnd', function(evt) { 
 
    document.querySelector('#flexbox').removeChild(this); 
 
}, false);

#flexbox { 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row; 
 
} 
 

 
.flexed { 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    -webkit-flex: 1 0 auto; 
 
    -webkit-transition: -webkit-flex 250ms linear; 
 
} 
 

 
.clicked { 
 
    -webkit-flex: 0 0 auto; 
 
}

<div id="flexbox"> 
 
    <div class="flexed"></div> 
 
    <div class="flexed" id="remove-me"></div> 
 
    <div class="flexed"></div> 
 
</div>

Editar: Para aclarar aún más, cuando se quita un nodo, deberías establecer su flexión en 0, luego eliminarlo del DOM. Al agregar un nodo, agréguelo con flex: 0, luego realice la transición a flexión: 1

Answer 2

He arreglado la demostración de @ skyline3000 según este ejemplo desde Treehouse. No estoy seguro si esto va a romper de nuevo si los navegadores cambian, pero esto parece ser la forma prevista para animar los cambios de tamaño de la flexión:

http://jsfiddle.net/2gbPg/2/

También utilicé jQuery pero técnicamente no es necesario.

.flexed { 
    background: grey; 
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */ 
    /* border: 1px solid black; */ 
    margin: 5px; 
    height: 100px; 
    flex-grow: 1; 
    transition: flex-grow 1000ms linear; 
} 

.removed { 
    /* Setting this to zero breaks the transition */ 
    flex-grow: 0.00001; 
} 

Una cosa a tener en cuenta sobre la CSS es que no se puede pasar a un flex-grow de cero, no será la transición se acaba de desaparecer. Solo debes poner un valor muy pequeño. También parece haber un error de artefacto al dibujar bordes, así que he usado un fondo en este caso.