流畅的动画有助于给用户界面带来很棒的感觉。使用 Vue 的过渡系统和可复用的功能组件,你可以轻松地控制应用程序的动画效果。大多数组件可以通过 transition
属性来改变他们的过渡效果。
下面是一些简单到复杂的例子。
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!