SOURCE

var app = new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  }, 
  methods: {
            // el 即操作的元素对象
        beforeEnter(el) {
                el.style.transform='translate(80px,80px)';
            },
        enter(el,done){
                //必须加下面一行，否则不会出现应有的效果
                el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeight
                el.style.transition='all 1.5s ease';
                el.style.transform='translate(0,0)';
                done()
            },
        afterEnter(el){
                console.log('afterEnter');
                // this.flag=false;//隐藏小球
            },
        beforeLeave: function (el) {
                el.style.transform='translate(0,0)';
             },
        // 当与 CSS 结合使用时
        // 回调函数 done 是可选的
        leave: function (el, done) {
            el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeight
            el.style.transition='all 3s ease';
            el.style.transform='translate(80px,80px)';
           // 这里直接调用done的话由于会立即删除元素导致动画不执行
          // done();
		  //方法1：
          // 不调用done可以进行动画，但是元素依旧存在，并且afterLeave函数钩子不执行
		  //方法2：
          // setTimeout可以解决这个问题，让done不立即执行，过几秒后再执行
          setTimeout(done,3000); //时间根据自己设定的动画时间确定
           
        },
        afterLeave: function (el) {
            console.log('afterLeave');
        
        },
  }
});

<div id="app">
  <button @click="show = !show">
    动态组件
</button>

 <transition 
 @before-enter="beforeEnter" 
 @enter="enter" 
 @after-enter="afterEnter"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 >
    <div id="ball" v-show="show">hello</div>
</transition>
</div>

进入页面，由于默认数据是true，点击时变成false，
所以第一次点击时，进行离场动画。调用leave等函数钩子...