Магазин

Для бизнеса

Smooth animations help make a UI feel great. Using Vue's transition system and re-usable functional components, you can easily control the motion of your application. Most components can have their transition altered through the transition prop.

Vuetify comes with over 10 custom css animations that can be applied to numerous components or your own custom use-case

Select your desired component from below and see the available props, slots, events and functions.

Below is a collection of simple to complex examples.

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

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

Scroll X transitions continue along the horizontal axis.

Scroll Y transitions continue along the vertical axis.

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

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

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

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

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

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

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

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!