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

【问题标题】：How can I animate an element added dynamically to a list, in Vue.js 3?如何在 Vue.js 3 中为动态添加到列表的元素设置动画？
【发布时间】：2021-08-12 15:36:46
【问题描述】：

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

为此，我将类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 加载较晚，也可能是我无法弄清楚的另一个原因。

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

【问题讨论】：

标签： javascript vue.js css-transitions

【解决方案1】：

如果您想最大化Vuejs 的功能。您可能需要结帐List Transitions。

【讨论】：

【解决方案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>

【讨论】：