vuejs動畫列表內網格項目

Question

我已經使用vuejs生成網格內的列表項我通過更改類名動態更新網格內單元格的內容。我想用css3動畫改變單元格內的元素。使用transition-group我已經應用了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中刪除了過渡並添加了簡單的關鍵幀動畫。