Анимировать добавление / удаление элементов из списка задач с помощью перехода

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 тег. Затем вы добавляете атрибут тега к transition тег со значением ul.

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

https://jsfiddle.net/ducwpeam/

Официальная документация покрывает это, используя ul в качестве примера: документация VueJs: список перемещений

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