Vue2.X过渡系统

过渡系统是Vue.js为DOM动画效果提供的一个特性，它能在元素从DOM中插入或移除时触发你的CSS过渡（transition）和动画（animation），也就是说在DOM元素发生变化时为其添加特尔顶的class类名，从而产生过渡效果。

一、Vue2.X定义过渡动画的方法

不同于Vue1.X，Vue2.x过渡系统取消了v-transion指令，新增了<transition/>内置标签，用法如下

<transition name="hello">
    <h1 v-if="show">你好</h1>
</transition>

transition标签为一个抽象标签，并不会额外渲染一个DOM元素，仅仅时用于包裹过渡元素及触发过渡行为。v-if、v-show等指令仍旧标记在内容元素上。

二、transition参数

2.1、name

Vue根据name自动生成对应的对应的类名。name-enter、name-enter-active、name-enter-to、name-leave、name-leave-active、name-leave-to

六种状态类名说明

name-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
name-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
name-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 name-enter 被移除)，在过渡/动画完成之后移除。
name-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
name-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
name-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 name-leave 被删除)，在过渡/动画完成之后移除。

2.2、appear

元素首次渲染的时候是否启用transition，默认为false。即v-if绑定值初始为true时，是否渲染时调用transition效果。

2.3、css

如果设置为true，则只监听钩子函数的调用。

2.4、type

设置监听CSS动画结束事件的类型。

2.5、mode

控制过渡插入/移除的先后顺序，主要用于元素切换时。可选择的值有out-in、in-out，如果不设置则同时调用。

三、钩子函数

与类名类似，也可以使用对应的钩子函数，包括@before-enter、@enter、@after-enter、@before-leave、@leave、@after-leave、

四、transition-group

transition-group主要用于将过渡动画应用到多个DOM元素上。

五、Demo

<style rel="stylesheet" type="text/css">
        /* 动画退出类名 */
        .hello-leave-active {
            animation: amt1 0.5s linear reverse;
        }

        /* 定义动画 */
        @keyframes amt1 {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(0px);
            }
        }

        /* 进入的起点、离开的终点 */
        .hello-enter,
        .hello-leave-to {
            transform: translateX(-100%);
        }

        /* 进入的过程 */
        .hello-enter-active,
        .hello-leave-active {
            transition: 0.5s linear;
        }

        /* 进入的终点、离开的起点 */
        .hello-enter-to,
        .hello-leave {
            transform: translateX(0);
        }
    </style>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> -->
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript"></script>

<body>
    <div id='app'>
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="hello" @before-enter="beforeEnter">
            <h1 v-if="show">你好</h1>
        </transition>
        <!-- <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp">
            <h1 v-show="!show" key="1">你好啊！</h1>
            <h1 v-show="show" key="2">迪丽热巴！</h1>
        </transition-group> -->
    </div>
    <script>

        let vm = new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {
                beforeEnter: function () {
                    console.log('beforeEnter');
                }
            }
        })
    </script>