SOURCE

var app = new Vue({
  el: '#app',
  data() {
    return {
      show: true
    }
  }, 
   components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    },
    'my-special-transition': {
        template: ' <transition\
        name="very-special-transition"\
        mode="out-in"\
        v-on:before-enter="beforeEnter"\
        v-on:enter="enter"\
        v-on:after-enter="afterEnter"\
        v-on:before-leave="beforeLeave"\
        v-on:leave="leave"\
        >\
        <slot></slot>\
        </transition>\
    ',
    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)';
             el.style.opacity= '0'
             console.log('leave')
           // 这里直接调用done的话由于会立即删除元素导致动画不执行
          // done();
		  //方法1：
          // 不调用done可以进行动画，但是元素依旧存在，并且afterLeave函数钩子不执行
          // 可以在leave函数钩子中通过opacity隐藏元素
		  //方法2：
          // setTimeout可以解决这个问题，让done不立即执行，过几秒后再执行，执行后会立即删除元素
        //   setTimeout(done,3000); //时间根据自己设定的动画时间确定
           
            }
        }
     }
 },
});

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

<my-special-transition :show=show>
   <p v-if="show">hello</p>
</my-special-transition>
</div>