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

Posted 2023-03-05

【中文标题】vuejs 为网格内的列表项设置动画

【英文标题】：vuejs animate list items inside grid

【发布时间】：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>

【参考方案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

【讨论】：

还有一些轻弹效果！