create-keyframe-animation实例
作者：
秒速五厘米
文章简介：
create-keyframe-animation实例
create-keyframe-animation
// 安装 npm install create-keyframe-animation --save
项目代码：
import animations from 'create-keyframe-animation'
// create-keyframe-animation 使用 开始
enter(el, done) {
const {x, y, scale} = this._getPosAndScale()// 获取变化数值
let animation = {
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)`
}
}
// 注册动画
animations.registerAnimation({
name: 'move',
animation,
// 参数配置
presets: {
duration: 400,// 动画时长
easing: 'linear'// 动画曲线 过度效果
}
})
// 绑定动画元素，done--到下一步afterEnter
animations.runAnimation(this.$refs.cdWrapper, 'move', done)
},
afterEnter() {
animations.unregisterAnimation('move')
this.$refs.cdWrapper.style.animation = ''
},
// 该动画后部分（注释）功能会影响singer-detail的回退
// 使用enter和afterEnter的方法则可行
leave(el, done) {
const {x, y, scale} = this._getPosAndScale()
let animation = {
0: {
transform: `translate3d(0,0,0) scale(1)`
},
60: {
transform: `translate3d(0,0,0) scale(1.1)`
},
100: {
transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
}
}
animations.registerAnimation({
name: 'out',
animation,
presets: {
duration: 400,
easing: 'linear'
}
})
animations.runAnimation(this.$refs.cdWrapper, 'out', done)
// this.$refs.cdWrapper.style.transition = 'all 0.4s'
// const {x, y, scale} = this._getPosAndScale()
// this.$refs.cdWrapper.style[transform] = `translate3d(${x}px,${y}px,0) scale(${scale})`
// this.$refs.cdWrapper.addEventListener('transitionend', done)
},
afterLeave() {
animations.unregisterAnimation('out')
this.$refs.cdWrapper.style.animation = ''
// this.$refs.cdWrapper.style.transition = ''
// this.$refs.cdWrapper.style[transform] = ''
},
// create-keyframe-animation 使用 结束