Плавная анимация помогает сделать пользовательский интерфейс более привлекательным. Используя систему Vue transition и многоразовые функциональные компоненты, вы можете легко контролировать анимацию движения своего приложения. У большинства компонентов transition может быть изменен с помощью transition prop.
Vuetify содержит более 10 анимаций css, которые могут быть применены к большинству компонентов или к вашему собственному пользовательскому кейсу
Ниже приведена коллекция простых и сложных примеров.
При этом эффекте элемент двигается по горизонтальной оси.
При этом эффекте элемент двигается по вертикальной оси.
При этом эффекте элемент прокручивается по горизонтальной оси.
При этом эффекте элемент прокручивается по вертикальной оси.
Многие компоненты Vuetify содержит transition prop, который позволяет вам указать собственный переход.
An example of the fab transition can be found in the v-speed-dial component.
An example of the fade transition can be found on the Carousel component.
The expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with v-expand-x-transition.
Программно управляйте началом перехода с помощью простого origin prop.
Используя несколько пользовательских переходов, легко создать простой анимированный список задач!
Вы можете использовать вспомогательную функцию для transition из Vuetify, чтобы легко создать свои собственные transitions. Эта функция возвращает объект, который можно импортировать в Vue. Используя функциональный компонент Vue убедитесь, что ваш переход является максимально эффективным. Просто импортируйте функцию:
Функция createSimpleTransition принимает 1 аргумент, name. Это имя, которое вы должны указать в стилях для вашего перехода. Это пример того, как выглядит v-fade-transition:
Готовы к большему? Продолжить чтение с: