czy można animować wkładki i wkładki Flexbox?

Question

Gdy usuwam przedmiot z flexbox, pozostałe elementy "przyciągają" się do nowych pozycji natychmiast, zamiast animować.

Pojęciowo, ponieważ pozycje zmieniają swoje pozycje, oczekuję, że przejścia będą miały zastosowanie.

mam ustawić właściwość przejścia wszystkich elementów składających się na schematu flexbox (i dzieci)

Czy istnieje jakiś sposób, aby animować edycje (dodaje & usuwa) do schematu flexbox? To jest właściwie showstopper dla mnie i jednego brakującego elementu z flexboxem.

Answer 1

Należy pamiętać, że specyfikacje Flexible Box Model i Grid Layout ciągle się zmieniają, nawet właściwości i prawidłowe wartości. Implementacje przeglądarek również są dalekie od ukończenia. Mówiąc to, możesz przejść do właściwości flex, aby elementy przechodziły płynnie, a następnie po prostu nasłuchuj na TransitionEnd, aby ostatecznie usunąć węzeł z drzewa DOM.

Oto przykład JSFiddle, działa w Chrome 21: http://jsfiddle.net/5kJjM/ (kliknij środkowy div)

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: celu dalszego wyjaśnienia, po usunięciu węzła powinieneś ustawić flex na 0, a następnie usunąć go z DOM. Podczas dodawania węzła dodaj go z flex: 0, a następnie zmień na flex: 1

Answer 2

Naprawiłem demo @ skyline3000 oparte na tym przykładzie z Treehouse. Nie wiem, czy będzie to przebić ponownie, jeśli przeglądarek zmienić, ale to wydaje się być zamierzony sposób animować zmiany flex Rozmiar:

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

także użyłem jQuery, ale technicznie nie jest wymagane.

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

Jedną rzeczą, aby pamiętać o CSS to nie można przejść do flex-grow zero, to nie będzie przechodzić będzie po prostu zniknąć. Musisz po prostu umieścić bardzo małą wartość. Wydaje się również, że przy rysowaniu obramowań występuje błąd artefaktyczny, więc użyłem tła w tym przypadku.