Vue中的CSS过渡的6个过程

<!--模板-->
<template>
    <div name="users">
        <hr>
        <!--过渡-->
        <button @click="showHide">按钮</button>
        <transition name="fade">
            <p v-if="show">显示与隐藏</p>
        </transition>

        <!--动画-->
        <button @click="showAnim">按钮</button>
        <transition name="Anim">
            <p v-if="hello">动画效果</p>
        </transition>

        <!--引入animate动画库-->
        <button @click="showAn">按钮</button>
        
        <!--
            enter-class (从无到有开始)
            enter-active-class (从无到有过程中)
            enter-to-class (2.1.8+) (从无到有结束)
            leave-class  (从有到无开始)
            leave-active-class  (从有到无过程中)
            leave-to-class (2.1.8+)  (从有到无结束)
        -->

        <transition name="an" enter-to-class="animated tada" leave-active-class="animated bounceOutRight">
            <p v-if="dh">动画库</p>
        </transition>
    </div>
</template>
<!--行为-->
<script>
    export default {
        name: 'users',
        data () {
            return {
                show:true,
                hello:true,
                dh:true
            }
        },
        methods:{
            showHide:function(){
                this.show = !this.show;
            },
            showAnim:function(){
                this.hello = !this.hello;
            },
            showAn:function(){
                this.dh = !this.dh;
            }
        }
    }
</script>
<!--样式-->
<style>

    /*这里是 opacity 从1到0 的过程(从有到无的过程,元素默认是无,所以从这里是开始)*/
    .fade-leave {    /*1:过渡离开时(从有到无开始执行时)*/
        transform: translateX(0);
    }
    .fade-leave-active {    /*2:过渡生效时(从有到无的过程中)*/
        transition: all 1s;
    }
    .fade-leave-to{    /*3:过渡离开结束时(从有到无执行完毕后)*/
        transition: all 1s;
        opacity: 0;
        transform: translateX(10px);
    }

    /*这里是 opacity 从0-1 的过程(从无到有的过程)*/
    .fade-enter{    /*4:过渡开始时(从无到有开始执行时)*/
        opacity: 0;
        transform: translateX(10px);
    }
    .fade-enter-active {    /*5:过渡生效时(从无到有的过程中)*/
        transition: all 1s;
        color: red;
    }
    .fade-enter-to{    /*6:过渡结束时(从无到有执行完毕后)*/
        opacity: 1;
        color: yellow;
        transform: translateX(0);
    }

    .Anim-enter-active, .fade-enter{
        animation: bounce-in 1s ease;
    }
    .Anim-leave-active{
        animation: bounce-in 1s ease reverse;
    }
    @keyframes bounce-in {
        0% {
            /*transform: scale(0);*/
            font-size:10px;
        }
        100% {
            /*transform: scale(1);*/
            font-size:20px;
        }
    }

    *{
        font-size:20px;
    }
</style>