Vue的过渡效果

Vue在插入、更新或者移除DOM的时候，提供多种方式的应用过渡效果

包括以下工具：

• 在CSS过渡和动画中自动应用class
• 可以配合第三方css动画库，如Animate.css
• 在过渡钩子函数中使用JavaScript直接操作DOM
• 可以配合使用第三方JavaScript动画库，如Velocity.js

单元素/组件的过滤

Vue提供了transition的封装组件，在下面的情况中，可以给任何元素和组件增加了entering/leaving过渡

• 条件渲染(v-if)
• 条件渲染(v-show)
• 动态组件
• 组件根节点

例子：点击鼠标实现淡入淡出

    <div id="demo">
        <button v-on:click="show = !show">Toggle</button>
        <transition name="fade">
            <p v-if="show">HELLO</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el : "#demo",
            data : {
                show: true
            }
        });
    </script>

    <style type="text/css" rel="stylesheet">
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-active {
            opacity: 0;
        }
    </style>

当插入和删除包含在transition组件的元素时，Vue会做以下处理：

• 自动嗅探目标元素是否应用了CSS过渡或动画，如果是，在适当的时机添加/删除CSS类名
• 如果过渡组件提供了JavaScript钩子函数，这些钩子函数会在适当的时候被调用
• 如果没有找到JavaScript钩子函数并且没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行（此处的浏览器逐帧动画机制，与Vue，和Vue的nextTick概念不同）

#过渡的-css-类名：

会有四个(CSS类)名在enter/leave的状态中切换

1.v-enter：定义进入过渡的开始状态，在元素被插入的时生效，在下一个帧移除

2.v-enter-active：定义进入过渡的结束状态，在元素被插入的时候生效，在transition/animation完成之后移除

3.v-leave：定义离开过渡的开始状态，在离开过渡被触发时生效，在下一帧移除

4.v-leave-active：定义离开过渡的开始状态，在离开过渡被触发时生效，在下一个帧移除

对于这些在enter/leave过渡切换的类名，v-是这些类名的前缀，使用<transition name="my-transition">可以重置前缀，比如v-enter 替换为 my-transition-enter

# CSS过渡

常用的过渡都是使用CSS过渡

    <div id="demo-slide">
        <button v-on:click="show = !show">Slide</button>
        <transition name="slide">
            <p v-if="show">message</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el : "#demo-slide",
            data: {
                show : true
            }
        });
    </script>

        .slide-enter-active {
            transition: all .3s ease;
        }
        .slide-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-enter,.slide-leave-active {
            transform: translateX(10px);
            opacity: 0;
        }

# CSS动画

CSS动画用法同CSS过渡，区别是在动画中v-enter类名在节点中插入DOM后不会立即删除，而是animationend事件触发时删除

    <div id="demo-animate">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Look at me!</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el : "#demo-animate",
            data : {
                show : true
            }
        });
    </script>

        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-out .5s;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        @keyframes bounce-out {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(0);
            }
        }

# 自定义过渡类名

可以通过下面的特征来自定义过渡类名：

• enter-class
• enter-active-class
• leave-class
• leave-active-class

上面的优先级高于普通的类名，这对Vue的过渡系统和其他第三方CSS动画库，如animate.css结合使用非常有用

示例：

    <div id="demo1">
        <button @click="show = !show"