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

这是更新的小提琴