Мы можем значительно улучшить юзер экспириенс, добавив плавную анимацию перехода между различными состояниями в нашем веб-приложении. Vue.js 3 предоставляет мощный компонент Transition, который упрощает процесс внедрения переходов во Vue-приложениях. В этой статье мы рассмотрим принцип работы компонента Transition Vue 3 и продемонстрируем его использование на реальных примерах.

Компонент Transition Vue 3

Компонент Transition в Vue 3 позволяет применять переходы к элементам при их вставке, обновлении или удалении из DOM. Он предоставляет нам декларативный способ определения анимаций и плавных переходов между различными состояниями. Для реализации этих эффектов компонент Transition использует переходы и анимацию CSS.

Пример использования

Чтобы использовать компонент Transition, необходимо обернуть в него целевой элемент или компонент. Рассмотрим простой пример, в котором мы собираемся добавить эффект плавного появления (fade in) при добавлении абзаца в DOM:

<script setup>
import {ref, onMounted} from "vue"
const show = ref(false);
</script>

<template>
    <button @click="show = !show" >Toggle Message</button>
  <transition name="fade">
    <p v-if="show">Hello, Vue 3 Transition Component!</p>
  </transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

В этом примере мы используем компонент Transition для определения перехода под именем «fade». Внутри этого компонента мы добавили условие на отображение абзаца, которое следит за значением свойства show. Когда значение show становится true, абзац плавно становится видимым.

CSS-классы

Компонент Transition автоматически добавляет и удаляет CSS-классы в целевом элементе на различных этапах перехода. Эти классы могут быть использованы для определения желаемых стилей анимации. Именуются эти CSS-классы на основе имени перехода и режиме перехода (появление/исчезновения).

Например, в предыдущем фрагменте кода используются следующие классы:

• fade-enter-active: Применяется к целевому элементу в течение всей анимации перехода появления.
• fade-leave-active: Применяется к целевому элементу во время всей анимации перехода исчезновения.
• fade-enter-from: применяется к целевому элементу через один кадр после добавления элемента.
• fade-leave-to: Применяется к целевому элементу через один кадр после срабатывания анимации перехода исчезновения.

Определив соответствующие стили для этих классов, можно создать необходимый эффект перехода, манипулируя такими свойствами анимации, как opacity, transform или height.

Режимы перехода

Компонент Transition поддерживает три режима перехода: in-out, out-in и режим по умолчанию.

• in-out: Сначала появляется новый элемент, а затем пропадает старый элемент.
• out-in: Сначала пропадает старый элемент, а затем появляется новый элемент.
• Режим по умолчанию: Одновременная анимация переходов старого и нового элементов.

Чтобы указать режим перехода можно использовать свойство mode компонента Transition:

<transition name="fade" mode="out-in">
  <!-- Content -->
</transition>

Кастомизация переходов

Компонент Transition также предоставляет дополнительные атрибуты и события для кастомизации переходов. С помощью атрибута appear можно задать анимацию перехода и при изначальной отрисовке компонента. Атрибут duration позволяет управлять длительностью перехода.

Кроме того, вы можете прослушивать такие события, как before-enter, enter, after-enter, before-leave, leave и after-leave, чтобы выполнять какие-нибудь действия с помощью JavaScript на различных этапах перехода.

Заключение

Компонент Transition в Vue 3 — это мощный инструмент, который упрощает процесс добавления плавных и визуально привлекательных переходов во Vue-приложения.