是否可以爲flexbox插入和移除動畫？

Question

當我從柔性箱中取出物品時，其餘物品會立即「捕捉」到其新位置，而不是動畫。

從概念上講，由於項目正在改變他們的立場，我希望過渡適用。

我已經設置了過渡性質的所有相關要素（Flexbox，就和孩子）

有什麼辦法動畫編輯（添加&刪除）到Flexbox的？這實際上是對我而言的一個炫耀者，也是對flexbox缺少的一部分。

Answer 1

請記住，柔性盒模型和網格佈局規格不斷變化，即使是屬性和有效值。瀏覽器的實現也遠沒有完成。也就是說，您可以在flex屬性上進行轉換，以便元素順利轉換，然後只需偵聽TransitionEnd以最終從DOM樹中刪除該節點。

下面是一個例子的jsfiddle，在Chrome 21上運行：http://jsfiddle.net/5kJjM/（點擊中間的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>

編輯： 爲了進一步澄清，當你刪除一個節點，你應該將它的flex設置爲0，然後從DOM中刪除它。添加節點時，將其添加到flex：0，然後將其轉換爲flex：1

Answer 2

我已經修復了@ skyline3000的示例，該示例基於此示例從Treehouse。不知道這是否會再次突破，如果瀏覽器的改變，但這似乎是動畫柔性大小的變化預期的方式：

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

而且我用jQuery的，但它在技術上不是必需的。

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

有一點要注意對CSS是你不能過渡到零flex-grow，它不會轉換會就此消失。你只需要放一個非常小的值。此外，在繪製邊框時，似乎還存在人爲錯誤，所以在此情況下我使用了背景。