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

Question

我正在使用Vue 3开发一个小型Todo应用程序。我希望一个新待办事项的附加是平滑的，而不是即时的。

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

<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中我有：

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

它没有像我所期望的那样工作。这可能是因为CSS加载较晚，也可能是我无法理解的另一个原因。

这个问题最简单的解决办法是什么？

Answer 1

您可以使用Vue列表转换。为了便于演示，我简化了您的代码。此外，我已经用li标记替换了组件TodoItem(假设它包含一个li作为根元素(。

new Vue({
el: "#app",
data: {
todos: [
{ id: 1, text: "Todo 1" },
{ id: 2, text: "Todo 2" },
{ id: 3, text: "Todo 3" }
]
},
methods: {
add(){
this.todos.push({ id: 4, text: "Todo 4"})
}
}
})

.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateX(-295px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition-group name="list" tag="ul">
<li v-for="(todo, index) in todos.slice().reverse()"
:key="todo.id" 
>{{ todo.text }}</li>
</transition-group>
<button @click="add">Add</button>
</div>

Answer 2

如果您想最大限度地发挥Vuejs的功能。您可能需要签出"列表转换"。