Анимация
Плавные переходы помогают создавать красивые и приятные интерфейсы. Используя систему переходов Vue и переиспользуемые функциональные компоненты, вы можете легко управлять анимациями вашего приложения. Переходы большинства компонентов можно изменить с помощью свойства transition.
API
Создаёт компонент transition-group. Документация Vue
Скрывает исчезающий элемент (нет анимации исчезновения)
Абсолютное позиционирование для исчезающего элемента (полезно для FLIP)
Устанавливает режим перехода (не относится к transition-group)
Устанавливает начало перехода
Примеры
Горизонтальное скольжение
При этом эффекте элемент двигается по горизонтали.
Вертикальное скольжение
Движение по вертикали.
Изменение размера
Многие компоненты Vuetify содержат свойство transition, которое позволяет вам задать собственный переход.
Появление/исчезновение
Другой пример такого перехода — компонент VCarousel.
Расширение
Пример такого перехода — компонент VExpansionPanel.
Пользовательская точка трансформации
Настраивайте центр перехода с помощью одного свойства.
Анимарованный список задач
Используя несколько пользовательских переходов, легко создать простой анимированный список задач!
Создание собственного перехода
Вы можете использовать функцию createSimpleTransition для создания своих собственных переходов. Эта функция вернет компонент, который вы можете подключить в Vue. Использование функциональных компонентов сделает ваш переход максимально эффективным. Просто импортируйте функцию:
Функция createSimpleTransition принимает 1 аргумент, name. Это имя, которое вы должны указать в стилях для вашего перехода. Это пример того, как выглядит v-fade-transition: