加入购物车小球动画

实现加入购物车的小球动画

<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')
        }