VueJs Transition With Examples

Code here and Check video guide for detailed guide

<template>
    <div>
        <transition name="appear">
            <h1 v-if="display">Some Content</h1>
        </transition>
        <button @click="display = !display">Toggle</button>
    </div>
</template>
<script>
    export default {
        data(){
           return{
                display:false
           }
        },
        methods:{
           
        },
       
    }
</script>


<style scoped>
    .appear-enter{
        opacity:0;
        color:red;
        transform:translateX(30px);
    }
    .appear-enter-active{
        transition: all 0.5s ease;
        color:red;
        animation:slideUp 1s ease-out;
    }
    .appear-enter-to{
        transition: all 0.5s ease;
        color:green;
    }


    .appear-leave{
        
    }


    .appear-leave-active{
        transition: all 5s ease;
        color:grey;
        transform:translateX(30px);
        animation:slideDown 1s ease-out;
    }


    .appear-leave-to{
        transition: all 5s ease;
        color:rgb(146, 9, 78);
    }


    @keyframes slideUp {
        from{
            transform: translateY(30px);
        }
        to{
             transform: translateY(0);
        }
    }


    @keyframes slideDown {
        from{
            transform: translateY(0);
        }
        to{
             transform: translateY(30px);
        }
    }
    




</style>