Vuetify

商店

企业版

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

Vuetify 附带了 10 多个自定义 css 动画,可应用于众多组件或你自己的自定义的组件。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

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

动画使用应用程序的 $primary-transition

X 轴滚动过渡沿着水平轴继续。

Y 轴滚动过渡沿着垂直轴继续。

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

v-speed-dial 组件中可以找到动画过渡的例子。

在 Carousel 组件上可以找到淡入淡出的过渡示例。

扩展过渡用于扩展面板和列表组中。也有一个横向版本的 v-expand-x-transition

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

使用多个自定义转场,可以轻松实现简单的待办事项清单!

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

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

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