如何在 Vue.js 3 中对动态添加到列表中的元素进行动画处理？

Question

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

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

<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 列表转换。出于演示目的，我对您的代码进行了一些简化。此外，我还用

TodoItem

标签替换了您的组件

li

（假设它包含

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

功能。您可能想查看List Transitions。