使用过渡动画从待办事项列表中添加/删除项目答案

【问题标题】：Animate adding/deleting items from todo list using transition使用过渡动画从待办事项列表中添加/删除项目
【发布时间】：2019-12-05 13:46:30
【问题描述】：

我有一个基于 vuejs 官方文档中提供的示例的待办事项列表。

示例：https://jsfiddle.net/87Lfbzng/

<ul class="todo-list">
  <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
    <div class="view">
      <input class="toggle" type="checkbox" v-model="todo.completed">
      <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
      <button class="destroy" @click="removeTodo(todo)"></button>
    </div>
    <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
  </li>
</ul>

这样做的问题是项目被立即删除/添加，没有动画。如果我按照官方文档实现transition 标签生效。 VueJS transitions

我尝试将转换标签放在ul 中，但也没有用。

我目前的尝试：https://jsfiddle.net/87Lfbzng/

CSS

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

  {
  opacity: 0;
}

标记

<transition name="fade">
  <ul class="todo-list">
    <li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }">
      <div class="view">
        <input class="toggle" type="checkbox" v-model="todo.completed">
        <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
        <button class="destroy" @click="removeTodo(todo)"></button>
      </div>
      <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
    </li>

  </ul>
</transition>

【问题讨论】：

标签： javascript vue.js vuejs2 vuejs-transition vuejs-transition-group

【解决方案1】：

您需要将ul 标记替换为transition 标记。然后将 tag 属性添加到值为 ul 的 transition 标记。

<transition-group name="fade" tag="ul" class="todo-list">

https://jsfiddle.net/ducwpeam/

官方文档对此进行了介绍，以ul为例：VueJs Documentation: List Moves

【讨论】：

【解决方案2】：

你可以用纯 css 做到这一点

.view {
   animation: fade-anim 0.4s ease
}
@keyframes fade-anim {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}

}

【讨论】：

【解决方案3】：

您只将ul 包裹在transition 内...这将无济于事.. 因为您的ul 是静态的：

Vue 提供了一个过渡包装组件，允许您在以下上下文中为任何元素或组件添加进入/离开过渡：

条件渲染（使用 v-if）
条件显示（使用v-show）
动态组件
组件根节点

相反，您需要将 li 元素包装在 transition 标记中，这一次它将是 transition-group，因为您有两个以上的元素：

<ul>
 <transition-group name="fade">
  <li></li>
  <li></li> 
   ...
 </transition-group>
</ul>

jsfiddle

【讨论】：