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

Question

我正在使用 Vue 3 开发一个小型的 Todo App。我希望新待办事项的添加能够顺利进行，而不是即时进行。

为此，我在最新的待办事项中添加了class活动：

<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

如果您想最大化 Vuejs 功能。您可能需要查看 List Transitions.

Answer 2

您可以使用 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>

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

How can I animate an element added dynamically to a list, in Vue.js 3?

javascript

css-transitions

vue.js