vue create-keyframe-animation js 执行 animation 动画

js是没办法动态添加 animation 的动画操作的。

像购物车，点击加入，是从点击位置跳入购物车的动画，位置是不固定的，这样就没办法写动画。所以使用 create-keyframe-animation 插件动态添加动画

1、npm install create-keyframe-animation

在需要使用动画的组件中引入

import animations from 'create-keyframe-animation';//css3动画插件

2、定义一个变量，写好动画

// 动画运行参数
let anim  = {
    0:{
        transform:`translate3d(${x}px,${y}px,0) scale(${scale})`
    },
    60:{
        transform:`translate3d(0,0,0) scale(1.1)`
    },
    100:{
        transform:`translate3d(0,0,0) scale(1)`
    }
}

3、初始化

// 定义动画
animations.registerAnimation({
    name:"playAnim",//动画名称
    animation: anim,//动画运行参数
    presets:{//动画预选项
        duration:400,//持续时间
        easing:"linear",//动画模式
    }
})

4、运行动画

// 运行动画  
/* 
	this.$refs.bigcircular 为动画对象 
	playAnim 动画名字，初始化中写了
*/
animations.runAnimation(this.$refs.bigcircular, 'playAnim');