使用過渡動畫從待辦事項列表中添加/刪除項目

Question

我有一個基於 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 轉換

我嘗試將轉換標簽放在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>

Answer 1

您需要將ul標記替換為transition標記。 然后，您將tag屬性添加到值為ul的transition標記。

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

https://jsfiddle.net/ducwpeam/

官方文檔對此進行了介紹，以ul為例： VueJs Documentation: List Moves

Answer 2

你可以用普通的CSS來做到這一點

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

}

Answer 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