vue.2.0transition钩子函数无响应

Question

vue.jstransitiion钩子函数无响应,

我看别人的问题是后enter后者after-enter没反应，而我这里是整个钩子函数没有放映，再钩子函数enter中，console.log('1')，这个随意的信息都无法打印，不知道哪里出了问题？已经再网上搜索大一片的解决方法了，可是还是没用，求大佬指点迷津

<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; // 跳出循环
        }
      }
    },
    enterFisrt(el) { // 下落小球的下落之前的运动函数钩子
      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) { // 下落小球的下落时的运动函数钩子
      // let rf = el.offsetHeight; // 触发浏览器重绘，offsetWidth、offsetTop等方法都可以触发
      // 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)';
      // });
      // 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) { // 下落小球的下落之后的运动函数钩子
      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>

Answer 1

兄弟，你没有理解transition的作用吧

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。

transition其实只是在元素/组件的过渡的时候才会有效果，需要配合v-show 或者 v-if使用。

<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" v-show="ball.show">
    <span class="inner inner_hook"></span>
  </div>
</transition-group>

兄弟，你忘记使用v-show了