概述：

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

包括以下工具：

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

前言：

在日常开发中动画是必不可少的一部分不仅能让元素直接的切换显得更加自然同时也能极大的增强用户体验因此在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果同时也是支持JS的不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.

过渡类名实现动画：

先丢一张官方文档偷的图：

动画进入:

v-enter：动画进入之前的初始状态
v-enter-to：动画进入之后的结束状态
v-enter-active：动画进入的时间段

PS：第一、第二个是时间点；第三个是时间段。

动画离开：

v-leave：动画离开之前的初始状态
v-leave-to：动画离开之后的结束状态
v-leave-active：动画离开的时间段

PS：第一、第二个是时间点；第三个是时间段。注意：关于概念官方文档有更具体的解释。

过渡动画实现的原理：

1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层 <transition>标签，无论是过渡还是动画 都需要这个<transition>包起来。

2.当元素/组件被<transition>标签包裹了以后 那么Vue会自动的为我们构建一个动画流程 具体的流程会在下文提到 因此先记住这句话就行啦 也就是说 如果你在<style>标签中添加了一些样式的话Vue会自动的在某个时间节点给元素或者组件添加、删除对应的样式

3.上面提到了当元素/组件被<transition>标签包裹的时候Vue会自动的构建动画流程 也就是自动的在某个时间节点添加/删除对应的CSS类名 Vue其实提供了6个对应的类名 ，如上图所示。

可能关于动画有些抽象，下面搜集了几张助于理解的图片：

我们假设黑色横线作为动画的整个流程红点为动画开始的瞬间：

动画进入:

1、当一个元素被transition包裹之后，Vue会自动分析元素的CSS样式，并且构建一个动画的流程。那么当我们用标签包裹了元素/组件的时候 Vue会在动画即将开始还没开始的时候添加两个CSS类名分别是v-enter/v-enter-to

3、然后，当动画即将被执行的这一瞬间：会往div上增加两个class，分别vv是v-enter和v-enter-active。当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的v-enter那个class，然后添加v-enter-to这个class。而v-enter-active这个class会一直存在于整个动画过程中直到动画结束的时候。

4、当动画执行的最后的一瞬间：Vue会把v-enter-active和v-enter-to去除掉。

上面我们讲了假如一个元素从隐藏到显示的动画，现在我们讲一下从显示到隐藏，和上面的图差不多，但是class名字变了：

动画离开：

1、当一个元素被transition包裹之后，Vue会自动分析元素的CSS样式，并且构建一个动画的流程。那么当我们用标签包裹了元素/组件的时候 Vue会在动画即将开始还没开始的时候添加两个CSS类名分别是v-leave/v-leave-to

3、然后，当动画即将被执行的这一瞬间：会往div上增加两个class，分别vv是v-leave和v-leave-active。当动画第一帧结束进行第二帧的时候：Vue会去掉刚才的v-leave那个class，然后添加v-leave-to这个class。而v-leave-active这个class会一直存在于整个动画过程中直到动画结束的时候.

4、当动画执行的最后的一瞬间：Vue会把v-leave-active和v-leave-to去除掉。

过渡动画总结：

结论一：所以说fade-enter-active和fade-leave-active这两个class其实是贯穿于整个动画，所以在这里添加过渡动画或者监听的属性。而另外四个属性相对于来说就是在某个时间点做出的被监听的动画属性的改变。

结论二：v-enter-to和v-leave的状态是一样的。而且一般来说，v-enter和v-leave-to的状态也是一致的。所以，我们可以把这四个状态写成两组。

也就是说：Vue的动画就是在某个时间去往元素上添加动画相关的class来实现的。

过渡类动画小demo

下面通过Vue的过渡类名来实现几个小demo：

<style>
  /* 盒子样式 */
       /* 盒子样式 */
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        /* 第一个盒子的效果 */
        /* tran1-enter-active入场动画的时间段  tran1-leave-active离场动画的时间段 */
        .tran1-enter-active, .tran1-leave-active {
            transition: opacity 1s;/*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
        }
        /* 显示前或隐藏后的效果 */
        /* tran1-enter 这是一个时间点，是进入之前元素的起始状态，此时还没有进入  */
        /* tran1-leave-to  是动画离开之后，离开的终止状态，此时元素动画已经结束 */
        .tran1-enter,.tran1-leave-to {
            opacity: 0; /* 都是隐藏效果 */
        }


         /* 第二个盒子的效果 */
        /* 显示过渡效果 */
        .tran2-enter-active {
            transition: all 1s ease;
        }
        /* 隐藏过渡效果 */
        .tran2-leave-active {
            transition: all 1s ease;
        }
        /* 显示前或隐藏后的效果 */
        .tran2-enter, .tran2-leave-to {
            opacity: 0;
            transform: translateX(10px);/* 水平方向右移10px  tran2-enter 一开始让DOM元素处于靠右10px的位置 */ 
        }
</style>
<body>
     <!-- 过渡效果和动画效果都需要用transition标签包住 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <!-- 过渡效果 -->
    <div id="tran1">
        <button @click="show = !show">渐变过渡</button>
        <transition name="tran1" mode="">
            <div class="box" v-if = "show"></div>
        </transition>
    </div>
    <br>
    <div id="tran2">
        <button @click="show = !show">渐变平滑过渡</button>
        <transition name="tran2" mode="">
            <div class="box" v-if="show"></div>
        </transition>
    </div>
</body>

<script>
        let vm1 = new Vue({
            el: '#tran1',
            data: {
                show: true,
            }
        })
        let vm2 = new Vue({
            el: '#tran2',
            data: {
                show: true,
            }
        })
            </script>

自定义过渡的类名

也就是修改过渡类名的前缀

在上一小段中，.v-enter、.v-leave-to这些过渡类名都是以v-开头的。这样做，会有一个局限性：假设有两个DOM元素都用transition进行了包裹，那这两个DOM元素就都具备了v-中所定义的动画。

那如果我们想把两个DOM元素的动画进行分开定义，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如：

1、自定义别名

 <transition name="my">
      <h6 v-if="flag2">这是一个H6</h6>
    </transition>

上方代码中，我们加了name="my"。

2.使用别名（我们就可以使用 .my-enter、.my-leave-to这些类名了）

  .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

css动画：Animate.css库

2、在Vue中使用Animate.css库

<style>
        /* 动画效果 */
        .anim1-enter-active {
            animation: bounce-in 1s;
        }
        .anim1-leave-active {
            animation: bounce-in 3s reverse;
        }
        /* @keyframes自定义动画效果，然后可以被引用 */
        @keyframes bounce-in {
            /* 若总共持续1秒，则0%表示0秒，50%表示0.5秒，100%表示1秒 */
            0% { transform: scale(0); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }
</style>
<body>
            <!-- 动画效果 -->
    <div id="anim1">
        <button @click="show = !show">放大缩小动画</button>
        <br>
        <transition name='anim1'>
            <div class="box" v-if="show"></div>
        </transition>
    </div>
    </body>
<script>
            let vm3 = new Vue({
            el: '#anim1',
            data: {
                show: true,
            }
        })

</script>

2、那么我们有了transition这个标签后，我们一定要使用fade-enter-active或者fade-leave-active这样的选择器名称么？不是我们还有下面这样的一个选择器可以多处使用的的方法：选择器正常命名，在transition标签中去书写enter-active-class和leave-active-class等属性

        /* 动画效果2 */
        .active {  /* 正常命名*/
            animation: bounce-in 1s;
        }

        .leave {/* 正常命名*/
            animation: bounce-in 3s reverse;
        }

        /* @keyframes自定义动画效果，然后可以被引用 */
          @keyframes bounce-in {
            /* 若总共持续1秒，则0%表示0秒，50%表示0.5秒，100%表示1秒 */
            0% { transform: scale(0); }
            50% { transform: scale(1.5); }
            100% { transform: scale(1); }
        }

         <div id="anim1">
        <button @click="show = !show">放大缩小动画2</button>
        <br>
        <!--给transition添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
        <transition enter-active-class="active" leave-active-class="leave">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

使用Animate.css

3、有了上面这个transition标签上使用动画class与正常css样式绑定的方法，我们就能使用Animate.css库了,去官网下载这个库，我们就能直接使用上面的动画效果，不用自己写了。官方网站：https://daneden.github.io/animate.css/

    <link rel="stylesheet" href="./am.css">

    <div id="anim1">
        <button @click="show = !show">放大缩小动画3</button>
        <br>
        <!--给transition添加enter-active-class和leave-active-class两个属性，并与CSS选择器绑定-->
        <transition enter-active-class="animated swing" leave-active-class="animated shake">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

使用animate.css注意事项：

上面的代码中，我们使用animate.css提供的bounceIn、bounceOut这两个类来做入场、离场的动画. 注意1：enter-active-class和leave-active-class这两个类名是Vue动画里的关键词，不能写成自己随意起的类名。

注意2: bounceIn、bounceOut这两个类不能直接使用，要在前面加上animated这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把class = animated这个代码移到h3标签里，效果是一样的，如下：

<transition enter-active-class="swing" leave-active-class=" shake" :duration="{ enter: 1000, leave: 300 }>
            <div class="box" v-if="show" class="animated"></div>
        </transition>

如果我们想给入场、出场动画设置持续的时间，可以使用:duration来做。

使用 :duration="毫秒值" 来统一设置入场和离场时候的动画时长使用 :duration="{ enter: 1000, leave: 300 }" 来分别设置入场的时长和离场的时长

总之vue过渡和动画，官网里面还有很多东西，这里先写到这了把，后面有空了再回来接续更新。

参考文章：

http://www.pianshen.com/article/267727922/

http://www.hehaibao.com/vue-animation-usage/#1