Vuejs动画列表网格中的项目

Question

我已经在网格中生成了列表项目，使用vuejs，我正在通过更改类名来动态更新网格内部的单元格内容。我想使用CSS3动画更改单元格内部的元素。使用过渡组i应用了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;
}

此处是更新的小提琴

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删除了过渡并添加简单的键帧动画。