CodeSandbox 示例。

插画来自 Pebble People,作者是 Deivid Saenz

yarn add @vueuse/motion

插件安装

如果您计划使用此包中的指令 (v-motion),您可能需要将插件添加到您的 Vue 实例中。

全局安装

您可以通过安装插件,全局添加对 v-motion 的支持。

import { MotionPlugin } from '@vueuse/motion'

const app = createApp(App)

app.use(MotionPlugin)

app.mount('#app')

组件安装

如果您只想从使用指令的组件中导入指令代码,请导入指令并在组件级别安装它。

import { MotionDirective as motion } from '@vueuse/motion'

export default {
  directives: {
    motion: motion(),
  },
}

用法

  • 如何使用指令?请查看 指令用法
  • 您可以动画哪些属性?请查看 Motion 属性
  • 如何创建您自己的动画样式?请查看 过渡属性
  • 什么是变体以及如何使用它们?请查看 变体
  • 如何控制您声明的变体?请查看 Motion 实例