vuejs 为网格内的列表项设置动画答案

【问题标题】：vuejs animate list items inside gridvuejs 为网格内的列表项设置动画
【发布时间】：2017-09-18 02:49:20
【问题描述】：

我在网格内生成了列表项，使用 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>

【问题讨论】：

标签： javascript css css-transitions vuejs2

【解决方案1】：

你可以试试这样的：

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

【讨论】：

【解决方案2】：

最简单的解决方法是隐藏上一个图标：

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

Here is updated fiddle

【讨论】：

还有一些轻弹效果！