vue.2.0transition鉤子函數(shù)無響應(yīng)

vue.jstransitiion鉤子函數(shù)無響應(yīng),

我看別人的問題是后enter后者after-enter沒反應(yīng)，而我這里是整個鉤子函數(shù)沒有放映，再鉤子函數(shù)enter中，console.log('1')，這個隨意的信息都無法打印，不知道哪里出了問題？已經(jīng)再網(wǎng)上搜索大一片的解決方法了，可是還是沒用，求大佬指點迷津

<template>
  <div class="aC">
    aC
    <transition-group name="drop" v-on:before-enter="enterFisrt" v-on:enter="enter" v-on:after-enter="EnterLast" >
        <div class="ball" v-for="(ball,index) in balls" :key="index">
          <span class="inner inner_hook"></span>
        </div>
      </transition-group>
  </div>
</template>

<script>
import bus from '@/js/bus.js'
export default {
  name: 'aC',
  data () {
    return {
      balls:[
      {
        show:false
      },
      {
        show:false
      },
      {
        show:false
      },
      {
        show:false
      },
      {
        show:false
      }
      ],
      dropBalls:[]
    }
  },
  created(){
    bus.$on('cartAdd', this.drop)
  },
  methods:{
   drop(el) {
      console.log(el);// 獲取到點擊的那個添加按鈕
      for (let i = 0; i < this.balls.length; i++) {
        let ball = this.balls[i];
        if (!ball.show) {
          ball.show = true; // 表示可以有下落動畫
          ball.el = el;
          this.dropBalls.push(ball);
          return; // 跳出循環(huán)
        }
      }
    },
    enterFisrt(el) { // 下落小球的下落之前的運動函數(shù)鉤子
      console.log('1')
      let len = this.balls.length;
      while (len--) {
        let ball = this.balls[len];
        if (ball.show) {
          let rect = ball.el.getBoundingClientRect(); // 小球盒模型
          let x = rect.left - 32; // 小球距離購物車圖標的位置
          let y = -(window.innerHeight - rect.top - 22);
          el.style.display = '';
          el.style.webkitTransform = `translate3d(0,${y}px,0)`;
          el.style.transform = `translate3d(0,${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) { // 下落小球的下落時的運動函數(shù)鉤子
      // let rf = el.offsetHeight; // 觸發(fā)瀏覽器重繪，offsetWidth、offsetTop等方法都可以觸發(fā)
      // this.$nextTick(() => { // 改回運動初始狀態(tài)
      //   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)';
      // });
      // Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { transform :'translate3d(0,0,0)'},{duration: 300})
      let inner = el.getElementsByClassName('inner_hook')[0];
      velocity(inner,{transform:'translate3d(0,0,0)'},{complete: done})
      // Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    EnterLast(el) { // 下落小球的下落之后的運動函數(shù)鉤子
      let ball = this.dropBalls.shift();
      if (ball) {
        ball.show = false;
        el.style.display = 'none';
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.aC{
  position: fixed;
  left: 12px;
  bottom:12px;
  width: 50px;
  height: 50px;
  background: yellow;
  z-index:200;
}
.ball{
  position:fixed;
  left:32px;
  bottom:22px;
  color:red;
}


.drop-transition{
  transition:all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41);
}
.drop-enter-active{
  transition:all .5s
}
.inner{
 display:inline-block;
 width:16px;
 height:16px;
 border-radius:50%;
 background:rgb(0,160,220);
 transition:all 0.4s linear;
}


</style>