vue商品添加至购物车的下落动画

html和css部分

<div class="car" @click="addCar($event)">添加到购物车</div>
<div class="ball-curve">
    <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
        <div class="ball"  v-show="ball.show">
            <div class="animationes">
                <!-- 定义下落球图标 -->
                <van-icon name="gold-coin" size="20" color="#ee0a24"/>
            </div>
        </div>
    </transition>
</div>

<style lang="stylus" scoped>
.ball-curve
    .ball
      position :fixed
      left :68%
      bottom :15px
      z-index :1500
      transition all 1s cubic-bezier(0.49,-0.29,0.75,0.41)
      .animationes
        width :15px
        height :15px
        transition all 1s linear
</style>

js部分

data() {
    return {
        //定义下落球
        ball:{
            show:false,
            el:''
        }
    }
},
methods: {
    addCar(e) {
        //显示小球
        this.ball.show = true
        //获取点击元素
        this.ball.el = e.target
    },
    beforeEnter(el){
        //让小球移动到点击的位置
        //获取dom元素节点
        const dom = this.ball.el
        //获取dom(点击按钮的)位置
        const rect = dom.getBoundingClientRect()
        //获取点击按钮x轴位置
        const x = rect.left-window.innerWidth*0.68
        //获取点击按钮y轴位置
        const y = -(window.innerHeight-rect.top)
        //开始移动小球到点击的坐标位置
        el.style.transform = 'translate(0,'+y+'px)'
        const animationes = el.querySelector('.animationes')
        animationes.style.transform = 'translate('+x+'px,0)'
      },
      enter(el,done){
        //触发重绘
        document.body.offsetHeight
        //小球移动回到原点(购物车)的位置
        el.style.transform = 'translate(0,0)'
        const animationes = el.querySelector('.animationes')
        animationes.style.transform = 'translate(0,0)'
        //过渡完成后执行的事件
        done()
      },
      afterEnter(el){
        //动画结束之后隐藏小球
        this.ball.show = false
      }
}