当元素在更新、插入、删除时添加不同的效果，这个效果有两部分：“过渡”和“动画”。vue本身是没有动画的，它引入的是css3中的过渡与动画。

过渡与动画

过渡：就是指元素从一种状态逐渐变为另一种的效果。使用过渡时，我们要指定添加效果的css属性和效果的持续时间。过渡的作用是使得效果在变化时更平滑。过渡是vue自带的特效。
动画：过渡只能设置起始状态的变化，而“动画”除了起始，能设置更多状态。比如说用百分比指定变化时间，0%是动画开始，100%是动画结束。使用动画时，要指定动画的名称和总作用时间。

进入.png

离开.png

单个元素的过渡

1.vue 有内置的过渡组件<transition>，该组件用于包裹要实现过渡效果的元素或组件；
2.<transition>可以在条件渲染 ( v-if )、条件展示 ( v-show )上使用，也可以在动态组件、组件根节点上使用；
3.<transition>并不是添加以后就可以起作用了，它的本质是对元素添加了css过渡。要在样式里设定过渡使用的效果；
4.样式选择器的前缀是可以设置的，通过<transition>的name属性自定义，如果不设置，那么选择器就是默认的前缀“v-”。

举个栗子：

v-enter.png

1、 .fade-enter为元素进入过渡时添加的效果，fade就是前缀，和组件的name属性要一致;
2、Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除；

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数;

v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除；

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除;

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数;

v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

单个元素的动画

1、使用动画的方法和过渡的一样，利用<transition>组件给元素或组件添加对应的样式；
2、使用@keyframes规则创建动画，这个规则用于指定元素从原来的样式变为新样式：

把@keyframes 绑定到选择器上，不然就没有动画效果；
在选择器内规定动画的名称和时长（默认时长为“0”）；
在@keyframes 内设置具体的效果。
举个栗子：

<style>
    .fade-enter-active{
        animation:fade-in 1s;
    }
    .fade-leave-active{
        animation:fade-in 1s reverse;
    }
    @keyframes fade-in{
        0%{
            transform:scale(0);
        }
        50%{
            transform:scale(1.5);
        }
        100%{
            transform:scale(1);
        }
    }
</style>
<body>
    <div id="demo">
        <transition name="fade">
            <p v-if="show">欢迎来到极乐世界</p>
        </transition>
        <button @click="show=!show">动画</button>
    </div>
    <script>
        new Vue({
            el:"#demo",
            data:{
                show:true
            }
        })
    </script>
</body>

多个元素的过渡

利用v-if/v-else

仅适用于不同的元素。举个栗子：

<style>
    .fade-enter-active{
        transition:all 3s ease;
    }
    .fade-leave-active{
        transition:all 1s cubic-bezier(1.0,0.5,0.8,1.0);
    }
    .fade-enter,.fade-leave-to{
        transform: translateX(30px);
        opacity: 0;
    }
    #demo{
        margin-left: 50px;
        margin-top:50px;
    }
</style>
<body>
    <div id="demo">
            <transition name="fade">
                <!--不同的元素-->
                <div v-if="show">欢迎来到极乐世界</div>
                <p v-else>今天适合出去散步</p>
            </transition>
            <button @click="show=!show">请点击我</button>
    </div>
    <script>
        new Vue({
            el:"#demo",
            data:{
                show:true
            }
        })
    </script>
</body>

用key特性标记元素

适用于同一标签元素。key的作用相当于元素id，对vue来说，每个key值是唯一的。举个栗子：

<style>
    .fade-enter-active,.fade-leave-active{
        transition:opacity 1s;
    }
    .fade-enter,.fade-leave-active{
        opacity: 0;
    }
</style>
<body>
    <div id="demo" class="demo">
            <transition name="fade">
                <button v-if="show" key="on" @click="show=false">on</button>
                <button v-else key="off" @click="show=true">off</button>
            </transition>
    </div>
    <script>
        new Vue({
            el:"#demo",
            data:{
                show:true
            }
        })
    </script>
</body>

使用第三方动画库

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<!--用link来引入第三方动画库-->
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="box">
        <button @click="isShow=!isShow">使用animate</button>
        <!--自定义类名要先添加animated，这个动画库才会生效;
            在transition标签中添加animate属性,用以在组件中添加animate动画-->
        <transition enter-active-class="animated fadeInRightBig" leave-active-class="animated flipOutY">
            <v-tpl v-if="isShow"></v-tpl>
        </transition>
    </div>
    <template id="tpl">
        <ul class="nav-up">
            <li><p>程序媛</p></li>
            <li><p>边城学校</p></li>
            <li><p>欢迎你</p></li>
        </ul>
    </template>
<script type = "text/javascript">
    new Vue({
        el: '#box',
        data: {
            isShow:false
        },
        components:{
            'v-tpl':{
                template:'#tpl'
            }
        },
        mounted(){
            this.isShow=true
        }
});
</script>
</body>
</html>

列表过渡

使用vue中的<transition-group>组件向列表添加过渡或动画。

<transition-group>与<transition>

<transition-group>被渲染的内部元素要使用唯一的key属性值；
当元素被渲染到网页上后，<transition>不会呈现出来，只在对应状态下添加对应的类名；而<transition-group>则会以真实的元素呈现，默认情况是<span>。

过渡、动画