vuejsグリッド内のリストアイテムをアニメーション化する

Question

vuejsを使用してグリッド内でリスト項目を生成しました。クラス名を変更してグリッド内のセルの内容を動的に更新しています。私はcss3アニメーションを使用してセル内の要素を変更したい。私はcssアニメーションを適用しましたが、正しく動作しません.cssクラスが適用されると、新しい要素が作成され、次の行にドロップされ、前の要素が非表示になります。どのようにして、セルのすぐ内側でアニメーションを作成できますか？ここ

はjsfiddleです：https://jsfiddle.net/49gptnad/274/

<div id="vue-instance"> 
    <transition-group tag="div" name="fade" class="uk-grid"> 
    <div class="uk-width-1-2" v-for="item in thumbs" :key="item.id"> 
     <div class="item"> 
     <i class="fa" :class="item.icon" aria-hidden="true"></i> 
     <h3>{{item.name}}</h3> 
     </div>  
    </div> 
    </transition-group> 
</div> 

Answer 1

最も簡単な解決策は、前のアイコン非表示にすることです：あなたはこのような何かを試すことができ

.fade-enter-active { 
    display: none; 
} 

Here is updated fiddle

Answer 2

を：

.item { 
    text-align: center; 
    font-size: 20px; 
    transition: opacity .5s; 
    animation: fade .5s; 
} 

@keyframes fade { 
    from {opacity: 0;} 
    to {opacity: 1;} 
} 

https://jsfiddle.net/49gptnad/1338/

htmlからのトランジションを削除し、単純なキーフレームアニメーションを追加しました。