Анимация

Плавные переходы помогают создавать красивые и приятные интерфейсы. Используя систему переходов Vue и переиспользуемые функциональные компоненты, вы можете легко управлять анимациями вашего приложения. Переходы большинства компонентов можно изменить с помощью свойства transition.

Применение

При этом эффекте элемент двигается по горизонтали.

API

Имя
group
По умолчанию
false
Тип
boolean

Создаёт компонент transition-group. Документация Vue

Имя
hide-on-leave
По умолчанию
false
Тип
boolean

Скрывает исчезающий элемент (нет анимации исчезновения)

Имя
leave-absolute
По умолчанию
false
Тип
boolean

Абсолютное позиционирование для исчезающего элемента (полезно для FLIP)

Имя
mode
По умолчанию
undefined
Тип
string

Устанавливает режим перехода (не относится к transition-group)

Имя
origin
По умолчанию
'top center 0'
Тип
string

Устанавливает начало перехода

Примеры

Горизонтальное скольжение

При этом эффекте элемент двигается по горизонтали.

Вертикальное скольжение

Движение по вертикали.

Изменение размера

Многие компоненты Vuetify содержат свойство transition, которое позволяет вам задать собственный переход.

Появление/исчезновение

Другой пример такого перехода — компонент VCarousel.

Расширение

Пример такого перехода — компонент VExpansionPanel.

Пользовательская точка трансформации

Настраивайте центр перехода с помощью одного свойства.

Анимарованный список задач

Используя несколько пользовательских переходов, легко создать простой анимированный список задач!

Создание собственного перехода

Вы можете использовать функцию createSimpleTransition для создания своих собственных переходов. Эта функция вернет компонент, который вы можете подключить в Vue. Использование функциональных компонентов сделает ваш переход максимально эффективным. Просто импортируйте функцию:

Функция createSimpleTransition принимает 1 аргумент, name. Это имя, которое вы должны указать в стилях для вашего перехода. Это пример того, как выглядит v-fade-transition:

Edit this page | language on Github