VueJs Animation Transition tutorial

Check video Guide for Vue Animations

VueJs Animation Transition tutorial

<template>


    <div class='container wrapper'>
        <form action="">
            <div class="form-group">
                <input type="text" class="form-control" v-model="name">
            </div>
            <div class="fomr-group">
                <input type="submit" class="btn btn-primary" v-on:click.prevent="addOnePlayer()">
            </div>
        </form>
        <hr>
        <div class="row" align='center'>
            <ul>
            <transition-group name="appear">
                
                    <li
                        v-for="(player,index) in players" :key="player"
                        class="list-group-item"
                        v-on:click="removeName(index,$event)"
                    >
                    { player }
                    </li>
                
            </transition-group>
            </ul>
        </div>


        <!-- <button @click="display = !display">Toggle</button>
        <hr>
        <transition name="appear">
            <div  v-if="display">
                <h1 class='btn btn-info'>Some Content</h1>
            </div>
        </transition> -->
    </div>


</template>


<script>
    export default {
        data(){
           return{
               name:'',
               players:['Roger','Steve','Mark'],
               display:false
           }
        },
        methods:{
            addOnePlayer(){
                if(!this.players.includes(this.name)){
                    this.players.unshift(this.name);
                }
            },
            removeName(index,e){
                e.target.style.position = 'absolute';
                this.players.splice(index,1);
            }
        },
    }
</script>
<style scoped>
    .appear-enter{
        opacity:0;
        color:red;
        transform:translateX(30px);
    }
    .appear-enter-active{
        opacity:1;
        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 0.5s ease;
        color:grey;
        transform:translateX(30px);
        animation:slideDown 1s ease-out;
    }
    .appear-move{
        transition:trasform 0.5s;
    }


    .appear-leave-to{
        opacity:0;
        transition: all 0.5s ease;
    }




    /* cutom css */
    .wrapper{
        padding-top: 100px;
    }
</style>