在Vue v-for列表中添加Div时的CSS动画

我有一个如下所示的vue列表：

<div v-for="item in items">
   <div class="animation">{{ item.name }}</div>
</div>

但是，当我将动画添加到项目时，每当页面加载时（即使数组中有0个项目），它也会启动动画。我希望在将项目添加到项目阵列时播放动画。有什么想法吗？我假设这就是默认情况下的工作方式

谢谢，

---

Jamie

首先，如果要将动画添加到列表中，需要将整个列表部分包装在一个转换组中

但如果您确实想使用关键帧，在您的示例中，您可以执行以下操作：

.list-enter-active, .list-leave-active {
   animation: loadingComment 0.5s ease-in-out forwards;
}
@keyframes loadingComment {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

---

此外，您可以在这个jsfiddle链接中看到结果，您可以使用元素来实现这一点。你试过使用它吗？你能包含更多的代码吗？就像我们在这里看不到的其他模板和动画类一样。

<transition-group name="list">
  <div v-for="item in items" :key="item.id">
     <div class="animation">{{ item.name }}</div>
  </div>
</transition-group>

.list-enter-active, .list-leave-active {
  opacity: 1;
  transition: opacity .5s;
}
.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.list-enter-active, .list-leave-active {
   animation: loadingComment 0.5s ease-in-out forwards;
}
@keyframes loadingComment {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}