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

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

vuejs动画列出网格内的项目

2 个答案: