javascript - 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