vue 购物车小球动画

Question

1、一直搞不懂：点击三次，第三次点击时，第三次的小球动画的afterDrop函数没有执行（注：连续快速点三次时没问题）

<template>
  <div class="ball-wrapper">
      <div v-for="(ball, index) in balls">
        <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
          <div class="ball" v-show="ball.show" :id="index" :key="index">
            <div class="inner" ref="inner"></div>
          </div>
        </transition>
      </div>
    </div>
</template>

<script>
import carcontrol from '../carcontrol.vue'
export default {
  data () {
    return {
      balls: [
        {
          show: false
        }, {
          show: false
        }, {
          show: false
        }, {
          show: false
        }, {
          show: false
        }
      ],
      dropBalls: []
    }
  },
   methods: {
    //点击carcontrol组件,通过组件传值，获取carcontrol组件的current.target
    drop(el) {
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i]
        if (!ball.show) {
          ball.show = true
          ball.el = el
          return
        }
      }
    },
    //点击carcontrol组件,向购物车添加，小球动画
    beforeDrop (el) {
      let i = el.getAttribute('id')
      console.log('beforeDrop' + i)
      let ball = this.balls[i]
      let rect = ball.el.getBoundingClientRect() //获取carcontrol组件相对屏幕的坐标
      let x = rect.left - 32
      let y = -(window.innerHeight - rect.top - 22)
      let inner = el.getElementsByClassName('inner')[0]
      el.style.transform = `translate3d(0, ${y}px, 0)`
      inner.style.transform = `translate3d(${x}px, 0, 0)`
    },
    dropping (el, done) {
      let i = el.getAttribute('id')
      console.log('dropping' + i)
      let rf = el.offsetHeight
      this.$nextTick(() => {
        el.style.transform = 'translate3d(0,0,0)'
        el.style.transition = 'all 0.5s cubic-bezier(0.49, -0.29, 0.75, 0.41)'
        let inner = el.getElementsByClassName('inner')[0]
        inner.style.transform = 'translate3d(0,0,0)'
        inner.style.transition = 'all 0.5s linear'
        el.addEventListener('transitionend', done)
      });
    },
    afterDrop (el) {
      let i = el.getAttribute('id')
      console.log('afterDrop' + i)
      let ball = this.balls[i]
      ball.show = false
    }
  }
}

2、当afterDrop函数里添加ball.style.display = 'none'，第三次的小球动画的afterDrop函数会有执行。且ball.show = false，小球应该隐藏了，为什么还要添加ball.style.display = 'none'。

afterDrop (el) {
   let i = el.getAttribute('id')
   console.log('afterDrop' + i)
   let ball = this.balls[i]
   ball.show = false
   ball.style.display = 'none'
}