Vue 包装器用于Motion One 动画库 - vue-motion-one

Vue 包装器用于Motion One 动画库 - vue-motion-one
插件名称 vue-motion-one
发布时间 2021年10月13日
插件作者 wobsoriano

Motion One 的Vue 3 包装器,它是一个用于构建快速性能动画的动画库。

安装和下载:

# Yarn
$ yarn add vue-motion-one motion

# NPM
$ npm i vue-motion-one motion

如何使用它:

1、导入并注册MotionOne插件。

import { createApp } from 'vue'
import { MotionOnePlugin } from 'vue-motion-one'
import App from './App.vue'
const app = createApp(App)
app.use(MotionOnePlugin)
app.mount('#app')

2. 使用v-animate指令对元素进行动画处理。

<template>
  <div
    v-animate
    // Motion One Keyframes
    :keyframes="{
      transform: 'rotate(90deg)'
    }"
    // Motion One Animation Options
    :options="{
      duration: 0.75
    }"
  />
</template>

3. 使用useAnimate钩子为一个或多个元素设置动画。

import { ref, onMounted } from 'vue'
import { useAnimate } from 'vue-motion-one'
const boxRef = ref()
const { play } = useAnimate(
  boxRef,
  { transform: 'rotate(45deg)' },
  { duration: 0.5 }
)
onMounted(() => {
  play()
})
<template>
  <div class="box" ref="boxRef"></div>
</template>

4. 使用useTimeline钩子创建复杂的动画序列。

import { ref, onMounted } from 'vue'
import { useTimeline } from 'vue-motion-one'
const boxRef = ref()
const { play } = useTimeline(
  [
    ['.box', { x: 100 }],
    [boxRef, { x: 100 }]
  ],
  { duration: 1 }
)
onMounted(() => {
  play()
})
<template>
  <div class="box"></div>
  <div ref="boxRef"></div>
</template>