在做动画的时候遇到了一个问题,就是动画移动的位置不能写死,所以就需要动态获取dom的位置 来实现动画
getBoundingClientRect 这个方法可以获取元素的位置
打印返回结果是这个
拿到这个后 就可以计算出动画应该移动的位置
<div class="content">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
@after-enter="afterEnter"
>
<div v-show="badgeShow" class="badge"></div>
</transition>
// 小球开场动画
beforeEnter (el) {
// 动画开始前 让小球到原来的位置
el.style.transform = 'translate(0, 0)'
},
enter (el, done) {
// 动态获取小球的横纵坐标
const ballPos = el.getBoundingClientRect()
// 动态获取徽标的横纵坐标【注意:这里获取徽标的位置,和双向数据绑定没有任何关系,所以,可以直接使用普通的DOM操作】
// DOM操作的优势:不论要操作的元素属于哪个组件,只要这个元素属于document,那么就能够直接获取到
const badgePos = document.querySelector('.van-info').getBoundingClientRect()
const left = badgePos.left - ballPos.left
const top = badgePos.top - ballPos.top
el.offsetWidth
// 动态设置 top 和 left 值
el.style.transform = `translate(${left}px,${top}px)`
// 设置小球的过渡效果 cubic-bezier是贝塞尔曲线 完成一个回弹效果
el.style.transition = 'all .5s cubic-bezier(.46,-0.4,1,.49)'
done()
},
// 动画结束后
afterEnter (el, done) {
this.badgeShow = !this.badgeShow
},