VueJs Animation Transition Hooks Tutorial

<template>


    <div>


        <transition name="appear"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"


            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"
        >
            <h1 v-show="display">Some Content</h1>
        </transition>
        <button @click="display = !display">Toggle</button>


    </div>


</template>


<script>
    import Velocity from 'velocity-animate'
    export default {
        data(){
           return{
                display:false
           }
        },
        methods:{
                // --------
                // ENTERING
                // --------


                beforeEnter: function (el) {
                    el.style.opacity = 0;
                },
                enter: function (el, done) {
                    Velocity(el,{
                        opacity:1,
                        fontSize:'40px'
                    },{
                        duration:2000,
                        complete:done
                    })
                },
                afterEnter: function () {
                    console.log('After enter');
                },
                enterCancelled: function () {
                    console.log('Enter Cancelled');
                },


                // --------
                // LEAVING
                // --------


                beforeLeave: function () {
                    console.log('Before Leave');
                },
                leave: function (el, done) {
                    Velocity(el,{
                        rotateZ:'150deg'
                    },{
                        duration:2000,
                        loop:3,
                        complete:done
                    })
                },
                afterLeave: function () {
                    console.log('After Leave');
                },


                leaveCancelled: function () {
                    console.log('Leave Cancelled');
                }
        },
    }
</script>
<style scoped>


</style>

check video guide here