[JavaScript知识库]2021.10.22解决今天使用create-keyframe-animation动画不起效且卡死

这次出了很多bug，例如定义的动画对象animation和create-keyframe-animation实例重名了导致报’xxx is not a function’，还有写错注册动画属性关键字presets等等。但这都不是重点，重点是写错了vue动画钩子函数导致卡死，错误代码不贴了只贴正确代码。
首先是定义动画

<transition name="norma"
			@enter="enter"
			@after-enter="afterEnter"
			
			>
			//dom结构
</transition >

回调函数

enter(el,done){
				const {x,y,scale}  = this._getPosAndScale()
				console.log(x,y,scale)
				let animations = {//这里写错了一个地方，定义的动画animation和create-keyframe-animation实例重名了导致报'xxx is not a function'
					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)'
					}
				}
				animation.registerAnimation({
					name:'move',
					animation:animations,
					presets:{
						duration:400,
						easing:'linear'
					}
				})
				animation.runAnimation(this.$refs.cdwrapper,'move',done)
			},
			afterEnter(){
				animation.unregisterAnimation('move')
				this.$refs.cdwrapper.style.animation = ''
			},

_getPosAndScale函数

_getPosAndScale(){
				const targetWidth = 40 //小圆宽度
				const paddingLeft = 40
				const paddingBottom = 30
				const paddingTop = 80
				const width = window.innerWidth * 0.8 //大圆直径
				const scale = targetWidth/width
				const x =-(window.innerWidth/2 - paddingLeft - targetWidth/2)
				const y = window.innerHeight - paddingTop - width/2  - paddingBottom - targetWidth/2
				return {
					x,y,scale
				}
			},