JavaScript钩子也叫过渡的钩子函数，借助v-on指令可以在这些节点挂载钩子函数，用于在元素过渡各节点时触发这些函数。

let APPComponent={
        template:`
           <div>
                <button @click="show = !show">
                    Toggle render
                </button>
                <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-bind:css="false">
                    <div class="box"  v-if="show">hello</div>
                </transition>
           </div>
        `,
        data(){
            return {
                show:true
            }
        },
       methods:{
            //过渡进入之前的组件状态
            beforeEnter(el){
                console.log("beforeEnter",el);
            },
            //过渡进入完成时的状态
            enter(el, done){
                console.log("enter",el);
                done();
            },
            //过渡进入完成之后的状态
            afterEnter(el){
                console.log("afterEnter",el);
            },
            // 过渡离开之前的状态
            beforeLeave(el) {
                console.log("beforeLeave",el);
            },
             // 过渡离开完成时的状态
            leave(el, done) {
                console.log("leave",el);
                done()
            },
            // 过渡离开完成之后的状态
            afterLeave(el) {
                console.log("afterLeave",el);
            }
        }
    };