フレックスボックスのインサートとアニメーションをアニメーションすることは可能ですか？

Question

フレックスボックスからアイテムを削除すると、残りのアイテムはアニメーション化されるのではなく新しい位置に即座に「スナップ」されます。

概念的には、アイテムの位置が変更されているため、移行が適用されると思います。

私は、関係するすべての要素（フレキシボックスと子供）

に移行プロパティはフレキシボックスへの編集（&削除を追加）をアニメーション化する方法はあります設定されていますか？これは実際に私とフレックスボックスで欠けているもののショーストッパーです。

Answer 1

フレキシブルボックスモデルとグリッドレイアウトの仕様は、プロパティと有効な値であっても常に変化しています。ブラウザの実装も完全ではありません。つまり、flexプロパティに移行して、要素がスムーズに移行するようにしてから、TransitionEndをリッスンして、最終的にDOMツリーからノードを削除することができます。ここで

はクローム21で実行されている、例JSFiddleです：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>

編集： ノードを削除する場合、さらに、明確にするために、そのフレックスを0に設定してから、それをDOMから削除する必要があります。ノードを追加するときにflex：0で追加してからflex：1に変更してください。

Answer 2

この例では、@ skyline3000のデモはTreehouseに基づいて修正しました。わからないブラウザが変更された場合、これは再び中断しますが、これはフレックスサイズの変更をアニメーション化することを目的と方法のようだ場合：

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

はまた、私はjQueryのを使用しますが、それは技術的に必要とされていません。 CSSについて注意する

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

ことの一つは、あなたがゼロのflex-growに移行することはできません、それはそれだけで消えます遷移しませんです。あなたはちょうど非常に小さな価値を置く必要があります。また、境界線を描くときにアーティファクトのバグがあるので、この場合は背景を使用しています。