Javascript 在Vue.js 3中，如何为动态添加到列表中的元素设置动画？

我正在使用Vue 3开发一个小型的。我希望添加一个新的待办事项是平滑的，而不是瞬间的

为此，我已将类活动添加到最新的待办事项中：

<template>
  <ul class="todo-list" v-if=dataIsLoaded>
      <TodoItem v-for="(todo, index) in todos.slice().reverse()"
        :key="todo.id" 
        :class="{done: todo.completed, active: index == 0}" 
        :todo="todo" 
        @delete-todo="$emit('delete-todo', todo.id)"
        @toggle-todo="$emit('toggle-todo', todo)"
        />
    </ul>
    <div class="loader" v-else></div>   
</template>

它没有像我预期的那样起作用。这可能是因为CSS加载得太晚，也可能是因为另一个我无法理解的原因

---

此问题的最简单解决方案是什么？

如果要最大化Vuejs的功能。您可能需要签出。

您可以使用Vue列表转换。为了便于演示，我简化了您的代码。我还将组件

TodoItem

替换为

li

标记（假设它包含一个

li

作为根元素）

newvue({
el:“应用程序”，
数据：{
待办事项：[
{id:1，文本：“Todo 1”}，
{id:2，文本：“Todo 2”}，
{id:3，文本：“Todo 3”}
]
},
方法：{
添加（）{
this.todos.push（{id:4，文本：“todo4”}）
}
}
})

。列表进入活动状态。列表保持活动状态{
过渡：所有1；
}
.list输入.list leave to/*。list leave active低于版本2.1.8*/{
不透明度：0；
转换：translateX（-295px）；
}

{{todo.text}}
添加

li:first-child {
  opacity: 0;
  transform: translateX(-295px);
  transition: all 0.3s ease;
}

li.active {
  opacity: 1;
  transform: translateX(0);
}