帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue封装Motion One 动画库组件

帝国模板之家 2022-03-09 网页特效 评论

描述:

Vue3封装Motion One,构建快速、高性能动画的动画库。

如何使用它:

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. 使用指令动画元素。

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

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

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. 使用钩子创建复杂的动画序列。

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>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言