动效

流畅的动画有助于给用户界面带来很棒的感觉。使用Vue的过渡系统和可复用的功能组件,您可以轻松地控制应用程序的动画效果。大多数组件可以通过transition属性来改变他们的过渡。

用例

滑动x过渡可沿水平方向移动。

API

名称
group
默认值
false
类型
boolean

Framework.Transitions.

名称
hide-on-leave
默认值
false
类型
boolean

Framework.Transitions.

名称
leave-absolute
默认值
false
类型
boolean

Framework.Transitions.

名称
mode
默认值
undefined
类型
string

Framework.Transitions.

名称
origin
默认值
'top center 0'
类型
string

Framework.Transitions.

示例

X轴滑动过渡

滑动x过渡可沿水平方向移动。

Y轴滑动过渡

过渡地使用应用程序$primary-transition.

缩放过渡

许多Vuetify组件都包含一个transition属性允许你指定你自己的效果

淡入淡出过渡

另一个淡入淡出过渡的示例可以在圆盘传送带组件上找到。

Expand transition

The expand transition is used in Expansion Panels and List Groups. There is also a horizonal version available with v-expand-x-transition.

自定义原点

通过使用一个简单的属性来可编程地控制过渡原点。

Todo list

Using multiple custom transitions, it is easy to bring a simple todo list to life!

创建您自己的

您可以用Vuetify的过渡辅助器函数来创建您自己的自定义的过渡效果,这个函数会返回一个可以导入到Vue的对象。使用Vue的 函数式组件 配置将确保您的过渡效果尽可能高效。只需要导入函数:

其中createSimpleTransition函数接受1个参数,即名称。这将是您可以与您的样式挂钩的名称。这是一个展示v-fade-transition的示例:

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore