2019-01-29vue钩子函数动画

vue钩子函数

第一组  动画从无到有

@beforeEnter  //定义动画的位置

el.style.transform="translate(x,y)"

@enter    //定义动画结束位置

el.offsetWidth

// 获取徽标和小球的位置 dom.getBoundingClientRect()

const ballposition = this.$refs.ball.getBoundingClientRect()

const badgeposition=document.getElementById('badge').getBoundingClientRect()

const xDist=badgeposition.left-ballposition.left

const yDist=badgeposition.top-ballposition.top

el.style.transform = `translate(${xDist}px,${yDist}px)`;  //反向字符串的拼接

el.style.transform="translate(x,y)"

el.style.transition="all 1s ease"

done()  //动画完成后动作

@afterEnter    //动画出现完毕，设置当前动画的初始状态

第二组  动画从有到无

@beforeLeave 

@leave

afterLeave