各位大佬，我在做购物车小球的时候发现一个问题，第一次购买的时候，没有小球动画，以后的几次都有，有知道是什么引起的么？

<template>
    <div @click="addCart($event)"></div>
    
    <div class="ball-container">
        <transition-group name="drop"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
        >
            <div class="ball" v-show="ball.show" v-for="(ball, index) in balls" :key="ball.id">
                <div class="inner inner-hook"></div>
            </div>
        </transition-group>
    </div>
<template>

<script>
    export default {
        data () {
            return {
                balls: []
            }
        },
        methods: {
            addBall ($event) {
                this.balls.push({
                    show: true,
                    id: this.balls.length,
                    x: $event.clientX,
                    y: $event.clientY
                })
            },
            beforeEnter (el) {
              let count = this.balls.length
              let x = this.balls[count-1].x - 32
              let y = -(window.innerHeight - this.balls[count-1].y -22 )

              el.style.webkitTransform = `translate3d(0, ${y}px, 0)`
              el.style.transform = `translate3d(${x - 16}px, ${y}px, 0)`

              let inner = el.getElementsByClassName('inner-hook')[0]
              inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
              inner.style.transform = `translate3d(${x}px, 0, 0)`
            },
            enter (el, done) {
              this.$nextTick(() => {
                el.style.webkitTransform = 'translate3d(0, 0, 0)'
                el.style.transform = 'translate3d(0, 0, 0)'
                let inner = el.getElementsByClassName('inner-hook')[0]
                inner.style.webkitTransform = 'translate3d(0, 0, 0)'
                inner.style.transform = 'translate3d(0, 0, 0)'
                done()
              })
            },
            afterEnter (el) {
              setTimeout(() => {
                el.style.display = 'none'
              }, 1000)
            }
        }
    }
</script>
<style>
  .ball-container 
    .ball
      position fixed
      left 32px
      bottom 22px
      z-index 200
      transition all 1s
      .inner
        width 16px
        height 16px
        border-radius 50%
        background rgb(0, 160, 220)
.drop-enter-active
  transition all 1s ease
</style>