Встроенные переходы

Vuetify предоставляет мощный и гибкий механизм для работы с анимацией компонентов и элементов через встроенные переходы. Использование переходов позволяет создавать плавные эффекты появления, исчезновения и перемещения компонентов, что делает интерфейс более динамичным и отзывчивым.

В Vuetify переходы реализованы через компонент <transition> или через его специализированные версии, такие как <v-fade-transition>, <v-slide-x-transition>, <v-scale-transition> и другие. Каждый переход использует стандартные CSS-анимации и управляет двумя основными состояниями: enter и leave.

Типы встроенных переходов

Vuetify предоставляет набор предопределенных переходов, которые можно применять к любым компонентам:

  • Fade Transition (v-fade-transition) Создаёт плавное исчезновение или появление элемента через изменение прозрачности (opacity).

    <v-fade-transition>
  <div v-if="show">Содержимое</div>
</v-fade-transition>

  • Slide Transitions (v-slide-x-transition, v-slide-y-transition) Позволяют сдвигать элементы по горизонтали (x) или вертикали (y). Эффект достигается с помощью CSS-свойства transform: translate().

    <v-slide-y-transition>
  <div v-if="show">Сдвигающийся элемент</div>
</v-slide-y-transition>

  • Scale Transition (v-scale-transition) Масштабирует компонент, создавая эффект «появления из центра». Полезно для всплывающих окон и модальных диалогов.

    <v-scale-transition>
  <v-btn v-if="show">Кнопка</v-btn>
</v-scale-transition>

  • Expand Transition (v-expand-transition) Разворачивает и сворачивает элемент по высоте. Идеально подходит для скрытия и отображения списков или аккордеонов.

    <v-expand-transition>
  <v-list v-if="show">
    <v-list-item>Элемент списка</v-list-item>
  </v-list>
</v-expand-transition>

  • Collapse Transition (v-collapse-transition) Похожа на expand, но обеспечивает более мягкое сворачивание и разворачивание элементов, особенно в таблицах и панелях.

Настройка переходов через пропсы

Большинство встроенных переходов поддерживают следующие ключевые пропсы:

  • mode – управляет порядком анимации при одновременном появлении и исчезновении дочерних элементов. Возможные значения: in-out и out-in.

    <v-fade-transition mode="out-in">
  <div v-if="activeTab === 1">Контент 1</div>
  <div v-else>Контент 2</div>
</v-fade-transition>

  • origin – определяет точку трансформации для масштабирования (scale) или сдвига (slide). Значения могут быть в формате CSS: top left, center center и т.д.

    <v-scale-transition origin="top center">
  <v-card v-if="show">Карточка</v-card>
</v-scale-transition>

  • group – используется для объединения нескольких компонентов в одну анимационную группу, что позволяет синхронизировать их появление и исчезновение.

Переходы с динамическим контентом

При работе с динамическим контентом, который рендерится через v-if или циклы v-for, встроенные переходы обеспечивают плавную анимацию без необходимости вручную управлять классами CSS.

<v-slide-x-transition>
  <v-chip
    v-for="item in items"
    :key="item.id"
  >
    {{ item.name }}
  </v-chip>
</v-slide-x-transition>

В данном примере каждый элемент списка будет плавно появляться при рендере и исчезать при удалении из массива items.

Пользовательские CSS-анимации с <transition>

Vuetify позволяет использовать кастомные CSS-классы совместно с встроенными переходами. Для этого можно определить классы v-enter-active, v-leave-active, v-enter-from, v-leave-to:

<transition name="custom-fade">
  <v-alert v-if="show">Сообщение</v-alert>
</transition>

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

Это даёт полный контроль над продолжительностью, кривой анимации и состояниями элемента при появлении и исчезновении.

Комбинирование переходов

Vuetify поддерживает комбинирование нескольких переходов для одного компонента, что позволяет создавать сложные эффекты:

<v-fade-transition>
  <v-scale-transition>
    <v-btn v-if="show">Кнопка с комбинированной анимацией</v-btn>
  </v-scale-transition>
</v-fade-transition>

В этом примере кнопка будет одновременно масштабироваться и плавно появляться через изменение прозрачности.

Анимация модальных и всплывающих элементов

Для диалогов, тултипов и меню переходы критически важны для UX. Vuetify использует встроенные переходы внутри таких компонентов, но их можно переопределить через проп transition:

<v-dialog v-model="dialog" transition="v-scale-transition">
  <v-card>
    <v-card-title>Диалог</v-card-title>
  </v-card>
</v-dialog>

Использование v-scale-transition создаёт эффект появления из центра, что выглядит естественно для модальных окон.

Рекомендации по производительности

  • Избегать анимации больших списков с сотнями элементов; лучше использовать виртуализацию.
  • Для сложных эффектов использовать комбинированные переходы или кастомные CSS-классы вместо JavaScript-анимаций.
  • Настраивать mode для компонентов с заменой контента, чтобы избежать мерцания или несинхронного исчезновения элементов.

Сводка ключевых особенностей

  • Встроенные переходы Vuetify работают с компонентами через <transition> или специализированные теги.
  • Основные типы: fade, slide, scale, expand, collapse.
  • Поддерживаются пропсы mode, origin, group для точной настройки анимации.
  • Переходы интегрируются с динамическим контентом и циклическим рендерингом (v-for).
  • Возможна комбинация нескольких переходов и кастомных CSS-анимаций.
  • Модальные компоненты используют встроенные переходы, которые легко переопределять через проп transition.

Эти возможности делают Vuetify мощным инструментом для создания плавных и отзывчивых интерфейсов с минимальными усилиями.

Оглавление