2019-01-29vue钩子函数动画
2019-01-29 本文已影响0人
骨子_6889
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
