è possibile animare gli inserti e le eliminazioni di Flexbox?

Question

Quando rimuovo un elemento da una casella flessibile, gli elementi rimanenti si "incastrano" nelle loro nuove posizioni immediatamente anziché animare.

Concettualmente, poiché gli articoli cambiano posizione, mi aspetto che le transizioni vengano applicate.

ho impostato la proprietà di transizione su tutti gli elementi coinvolti (il FlexBox ei bambini)

Esiste un modo per animare le modifiche (aggiunge & cancella) ad un FlexBox? Questo è in realtà un ostacolo per me e l'unico pezzo mancante con la flexbox.

Answer 1

Ricordare che le specifiche del modello di scatola flessibile e del layout di griglia cambiano costantemente, anche le proprietà e i valori validi. Le implementazioni del browser sono tutt'altro che complete. Detto questo, è possibile eseguire la transizione sulla proprietà flex in modo che la transizione degli elementi avvenga senza problemi, quindi è sufficiente ascoltare TransitionEnd per rimuovere definitivamente il nodo dall'albero DOM.

Ecco un esempio JSFiddle, in esecuzione in Chrome 21: http://jsfiddle.net/5kJjM/ (fare clic sul div centrale)

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>

Edit: Per chiarire ulteriormente, quando si rimuove un nodo, dovresti impostare il suo flex su 0, quindi rimuoverlo dal DOM. Quando aggiungi un nodo, aggiungilo con flex: 0, quindi passa a flex: 1

Answer 2

Ho corretto la demo di @ skyline3000 basata su questo esempio da Treehouse. Non so se questo si romperà di nuovo se i browser cambiano, ma questo sembra essere il modo in cui lo scopo di animare le modifiche di dimensione flex:

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

Inoltre ho usato jQuery ma tecnicamente non è necessaria.

.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 da notare circa il CSS è non si può passare ad un flex-grow pari a zero, non sarà la transizione sarà semplicemente sparire. Devi solo mettere un valore molto piccolo. Inoltre sembra che ci sia un bug artefatto quando si disegnano i bordi, quindi in questo caso ho usato uno sfondo.