# 过渡动画

平滑的动画让界面体验更好。使用 Vue 的过渡系统和可复用的功能组件, 你可以轻松的控制应用程序的运动. 大多数组件可以通过 stansition prop改变它们的过渡动画.

# 使用

Vuetify 提供了 10 多个 css 动画模版，可快速应用于众多官方组件或自定义的组件上。

# API

# 示例

# 属性

# 自定义原点

用一个简单的 prop 以编程的方式控制变换原点。

# 其他

# Expand x

扩展过渡用于扩展面板和列表组。同样还有一个水平版本 v-expand-x-transition 可用.

# Fab

在 v-speed-dial 组件中可以找到fab过渡的示例.

# Fade

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

# Scale

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

# Scroll x

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

# Scroll y

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

# Slide x

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

# Slide y

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

# Todo list

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

# 创建您自己的

您可以使用Vuetify的过渡辅助功能来轻松创建您的自定义过渡。此函数将返回一个可以导入 Vue 的对象. 使用 Vue 的功能组件选项将确保您的过渡尽可能有效。只需导入函数：

import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'

const myTransition = createSimpleTransition('my-transition')

Vue.component('my-transition', myTransition)

createSimpleTransition 函数接受1个参数: name。这个名称用于与您的过渡样式挂钩. 以下是 v-fade-transition 的示例:

.fade-transition
  &-leave-active
    position: absolute

  &-enter-active, &-leave, &-leave-to
    transition: $primary-transition

  &-enter, &-leave-to
    opacity: 0

了解更多？

继续学习由我们的团队选择的相关内容，或通过使用下面的导航链接在页面之间跳转。

在 GitHub 上编辑此页面

最后更新：11/12/2024, 6:59:50 AM