vue 通过点击事件连续触发transition动画

Question

<template>
  <div class="ball-wrapper">
      <transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
        <div class="ball" v-show="ball.show">
          <div class="inner" ref="inner"></div>
        </div>
      </transition>
    </div>
</template>
<script>
import carcontrol from '../carcontrol.vue'
export default {
  props: ['deliveryPrice', 'minPrice', 'selectedFoods'],
  data () {
    return {
      ball: {
        show: false
      }
    }
  },
 
  methods: {
    // 点击+，向购物车添加，通过组件传值获取el = event.target
    drop (el) {
      this.ball.show = true
      this.ball.el = el
    },
    // 向购物车添加的动画
    beforeDrop (el) {
      let rect = this.ball.el.getBoundingClientRect()
      let x = rect.left - 32
      let y = -(window.innerHeight - rect.top - 22)
      let inner = this.$refs.inner
      el.style.transform = `translate3d(0, ${y}px, 0)`
      inner.style.transform = `translate3d(${x}px, 0, 0)`
    },
    dropping (el, done) {
      let inner = this.$refs.inner
      el.offsetWidth
      el.style.transform = 'translate3d(0, 0, 0)'
      inner.style.transform = 'translate3d(0, 0, 0)'
      el.style.transition = 'all 0.6s cubic-bezier(0.49, -0.29, 0.75, 0.41)'
      inner.style.transition = 'all 0.6s linear'
      done()
    },
    afterDrop (el) {
      this.ball.show = false
    }
}
</script>

通过点击事件触发小球动画，但不断点击时就会不断重新触发动画，想要等小球动画完成后，才再通过点击事件触发小球动画
求各位大神指点一下， 谢谢。