flexbox eklentilerini hareketlendirmek ve kaldırmak mümkün mü?

Question

Bir öğeyi bir esnek kutudan kaldırdığımda, kalan öğeler, animasyon yerine, yeni konumlarına hemen "yapışır". Kavramsal olarak, öğeler pozisyonlarını değiştirdiğinden, geçişlerin uygulanmasını beklerim.

Bir flexbox'a ilgili tüm unsurları (flexbox'a ve çocuklar)

düzenlemeleri animasyon uygulamak için herhangi bir yolu (& siler ekler) var mı üzerinde geçiş özelliğini ayarlamış? Bu aslında benim için bir showtopper ve flexbox'lı bir eksik parça.

Answer 1

Esnek Kutu Modeli ve Izgara Düzeni belirtimlerinin, özellikler ve geçerli değerler olsa bile sürekli değiştiğini unutmayın. Tarayıcı uygulamaları da eksiksiz değil. Bu söyleniyorsa, flex özelliğine geçiş yapabilirsiniz, böylece öğeler geçişi düzgün bir şekilde geçiş yaptıktan sonra nodu DOM ağacından sonlandırmak için sadece TransitionEnd dinleyiniz. , Bir düğüm kaldırdığınızda ayrıca, netleştirmek için: (ortadaki div tıklayın)

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>

Düzenlemehttp://jsfiddle.net/5kJjM/: Burada

Chrome 21'den çalışan, JSFiddle bir örnektir flexini 0 olarak ayarlamanız, daha sonra DOM'dan kaldırmanız gerekir. Bir düğüm eklerken, flex: 0 ile ekleyin ve sonra esmeye geçiş yapın: 1

Answer 2

Bu örnekte, Treehouse numaralı telefondan @ skyline3000'nin tanıtımını düzelttim. Emin değilim tarayıcılar değiştirirseniz bu yine kıracak ama bu esnek boyut değişiklikleri animasyon amaçlanan yol olarak görünüyorsa:

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

Ayrıca jQuery kullanılan ancak teknik olarak gerekli değildir. CSS konusunda dikkat edilmesi gereken

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

Bir şey sıfır flex-grow geçiş olamaz, o sadece kaybolur geçiş olmayacaktır. Çok küçük bir değer koymanız gerekiyor. Ayrıca, sınırları çizerken yapay bir hata var gibi görünüyor, bu yüzden bu durumda bir arka plan kullandım.