Анимация появления: Transition

Когда v-if убирает элемент, он исчезает мгновенно. Встроенный компонент Transition добавляет элементу CSS-классы в момент появления и исчезновения, а вы описываете в этих классах анимацию. Устанавливать ничего не нужно — компонент входит в Vue.

Компонент Transition

Оберните элемент с v-if или v-show в Transition:

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'
 
const showHelp = ref(false)
</script>
 
<template>
  <button @click="showHelp = !showHelp">Справка</button>
  <Transition name="fade">
    <p v-if="showHelp">Введите текст задачи и нажмите Enter.</p>
  </Transition>
</template>
 
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
 
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Теперь подсказка плавно проявляется и тает за 0,3 секунды. Атрибут name="fade" задаёт начало имён классов.

Классы перехода

Обычно хватает четырёх классов из примера: состояния «до» и «после» совпадают с обычным видом элемента.

Анимация списка

Для элементов v-for используют TransitionGroup. Он работает так же, но для каждого элемента списка:

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo.id)">Удалить</button>
    </li>
  </TransitionGroup>
</template>
 
<style scoped>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}
 
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

Новая задача въезжает справа, удалённая уезжает вправо и тает. tag="ul" говорит, каким тегом обернуть список, — без него TransitionGroup не выводит обёртку. Массив todos и функция removeTodo — из урока про списки.

Частая ошибка

Transition анимирует только один элемент, который появляется или исчезает. Если внутри нет v-if или v-show, анимации не будет: элемент никогда не входит и не выходит. А в TransitionGroup каждому элементу нужен :key — без ключа Vue не отличит удалённую задачу от соседней.