实现加入购物车的小球动画
<transition
name=“my-ball”
@before-enter=“beforeEnter”
@enter=“enter”
@after-enter=“afterEnter”
>
beforeEnter(el){
el.style.transform = 'translate(0,0)'
},
enter(el,done){
// console.log('enter')
el.offsetWidth
const ballPosition = this.$refs.aball.getBoundingClientRect()
****getBoundingClientRect()是js原生的方法,用于获取dom在视图中的位置****
const appBallPosition = document.getElementById('appBall').getBoundingClientRect()
let xDist = appBallPosition.left - ballPosition.left
let yDist = appBallPosition.top - ballPosition.top
console.log(xDist,yDist)
el.style.transform= `translate(${xDist}px,${yDist}px)`
el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)'
// done()
// el.addEventListener('webkitTransitionEnd', () => {
done();
// })
},
afterEnter(el){
this.flag = !this.flag
// console.log('afterEnter')
}