Vue动画库create-keyframe-animation使用

一.安装

npm i create-keyframe-animation

二.script标签中引入

import animations from 'create-keyframe-animation'

三.定义动画对象

animation: {0: {transform: `translate3d(100px,0,0) scale(2)`},60: {transform: 'translate3d(0,0,0) scale(1.1)'},100: {transform: 'translate3d(0,0,0) scale(1)'}}

四.mounted钩子函数中注册并使用

	animations.registerAnimation({name: 'move', // 动画名称animation:this.animation, // 动画presets: { // 预设项duration: 4000, // 持续时间easing: 'linear' // 时间函数}})animations.runAnimation(this.$refs.animation, 'move',()=>{console.log('finished')
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！