Vue系列连载又继续了，公众号和微信号都接到了伙伴们的催更，最近忙于工作，没来得及时更新《Vue2.0进阶》的教程文章，大家久等了。

这一节我们来学习如何利用Vue提供的transition组件实现一些过渡效果，同时利用上一节《Vue开发调试神器Vue-devtools》来帮助我们调试，这也是为什么要先学习Vue-devtools的原因。

实现过渡的动画效果已经不是什么稀奇的事，是每一个前端开发者都要必备的技能。在不依赖第三方框架的库的前提下，实现动画最简单的办法就是使用CSS3给我们提供的属性。这一节，我们将会使用CSS3的transition属性来实现我们的想要的效果。

如果还没了解CSS3的transition属性的小伙伴可以事先去了解一下，如果一时半会实在没条件（正在挤地铁呢）去查阅transition属性，可以继续往下看，前端君会穿插着讲一些transition属性的内容。

除了CSS3的transition属性，Vue提供的组件也叫transition，可别混淆了，它们是两个不同的东西，仅仅是长得一样罢了。

<transition/>组件

<transition/> 组件的写法：

<transition name="box"></transition>

我们会给 <transition/> 组件添加一个属性name，我们取名为box。

然后呢，然后怎样才会有动画效果呢， <transition/> 组件什么时候才能起作用呢？

<transition/>起作用

Vue提供的 <transition/> 组件，会在下列四种情况下起作用：

    1. 条件渲染（使用v-if）

    2. 条件展示（使用了v-show）

    3. 动态组件

4. 组件根节点

在上述的任意一种情况发生的时候（比如：v-show的值为true切换成false的时候），我们可以给 <transition/> 组件包含的节点元素添加entering/leaving过渡动画效果。

那我们如何添加我们想要的过渡效果呢？

过渡原理分析

原来，当一个被 <transition/> 组件包含的节点出现了以上的4种情况的任意一种的时候，Vue自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

所谓的：“在恰当的时机添加/删除 CSS 类名”，其实是：

1.v-enter：进入过渡效果（enter）刚刚开始那一刻。在元素被插入或者show的时候生效，在下一个帧就会立刻移除，一瞬间的事。

2.v-enter-active: 表示进入过渡（entering）的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。

3.v-leave: 离开过渡（leave）的开始那一刻。在离开过渡被触发时生效，在下一个帧移除，也是一瞬间的事。

4.v-leave-active：离开过渡（leaving）的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

看文字看不懂没关系，用图来解释可能会直观一点。

假设一个被 <transition/> 组件包含的节点从隐藏到显示（称之为进入过渡），它会被依次添加一些类class，如图：

反之，如果是从显示到隐藏（称之为离开过渡），它会被依次添加一些类class，如图：

注意：.v-enter中的v-只是前缀，如果我们 <transition/> 组件的name值为box，那么它实际的class为 .box-enter。

既然Vue给我们提供了这些class类，我们就可以编写这些class的内容来实现我们想要的过渡效果了。

实战小案例

讲到这里，似乎还似懂非懂，总感觉理解的不是很透彻，当然，还没动手敲一遍，怎么会透彻，那接下来我们再来一个例子演示一遍。

我们先来看看要实现的案例效果（如下图），再一步一步来实现它。

(我是gif，加载有点慢)

首先，先引入我们的vue.js文件，这里就不演示了。

我们先用html布局：

 <div id="app" class="app">    <button class="btn">切换</button>    <div class="container">        <div class="box"></div>    </div> </div>

Javascript部分：

 <script>    const app = new Vue({        el:"#app",        data:{            showBox:false        }    }); </script>

相信学过《Vue2.0基础系列》的同学看上面这两段代码应该是毫无压力了。CSS样式布局就不展示，无非是定义各个节点的宽高颜色罢了。

上面data中的showBox的值默认是为fasle，我们来修改代码，实现点击切换box节点的显示/隐藏。

代码稍做修改：

 <button         @click="showBox = !showBox"         class="btn">    切换 </button>

给 <button/> 组件添加vue的点击事件处理程序，每次点击“切换”按钮的时候将showBox的值取反，就能实现box元素的显示/隐藏，非常好理解。

我们顺便打开开发者工具，找到Vue面板：

我们来看看切换的效果：

（我是gif，加载有点慢）

通过 Vue调试面板我们可以看到，当我们不断点击的时候，showBox的值不断的取反，而页面的效果也是在我们的预料之中，box元素节点不断在显示和隐藏之间切换。但是，box节点只是简单生硬的切换隐藏/显示，并没有任何过渡效果。

当然啦，因为最重要的 <transition/> 组件我们还没用上呢？

接着我们再修改代码：

 <transition name="box">    <div v-show="showBox" class="box">        i am the box    </div> </transition>

我们看到，原来的box节点元素，现在嵌套在了 <transition/> 组件的内部，并且name属性的值为box。当我们的showBox再取反的时候，Vue就会在适当的时候添加相应的class类名了。

比如，当它进入过渡的时候（隐藏→显示），就会依次发生：

1. 添加.box-enter

2.  删除.box-enter，添加 .box-enter-active

3.  删除.box-enter-active

当它离开过渡的时候（显示→隐藏），就会依次发生：

1. 添加.box-leave

2. 删除.box- leave，添加 .box- leave-active

3. 删除.box- leave -active

有了这些class，我们就可以根据自己的需要，给它们添加内容。

 /*box节点本身的样式*/ .box{    width:100%;    height:100%;    text-align: center;    line-height: 200px;    background: #ff8282;    color: #Fff;    /*以下两个默认值，可不写*/    /*写上只是为了便于讲解，记住这两个*/    opacity: 1;    margin-left: 0; }

提示：这是box节点原本的样式，最后两个CSS属性的是都是默认值，写出来是为了便于后面的理解。

我们需要定义进入和离开过渡动画效果，这里用到了CSS3的transition属性。

 .box-enter-active,.box-leave-active{    transition: all .8s; }

这里的transition表示 box节点所有属性的变化都会运用此过渡效果，过渡时间为0.8秒，是CSS3中transition属性的知识。

然后我们再设置进入过渡（entering）的样式，因为我们想要的效果是box节点从右往左滑动进入，并且透明度由浅到深，所以一开始那一刻的样式设置为：

 .box-enter{    opacity: 0;    margin-left: 100%; }

当进入下一帧的时候，.box-enter立刻被删除，opactity的值由0变成上面定义的默认值：1，margin-left的值由100%变成上面定义的默认值：0，与此同时也添加了.box-enter-active，正因为.box-enter-active里面的transition属性定义了过渡效果，所以，属性的变化达到了慢慢过渡的效果。

而离开过渡（leaving）的时候，是从左到右滑动离开的，并且透明度也是由深到浅，直到透明。所以离开过渡一开始那一刻的样式和默认样式一样，我们无需重复定义。

而离开过渡（leaving）最后的一刻的样式是：

 .box-leave-active{    opacity: 0;    margin-left: 100%; }

跟.box-enter的样式一样，进入那一刻从右边进场，最后离开完成那一刻，回到了右边。（从哪里来，会哪里去）

最后我们看看效果，是不是我们想要的：

（我是gif，加载有点慢）

完美，成功地运用Vue给开发者提供的 <transition/> 组件实现了过渡效果。

本节总结

理解Vue的  <transition/>  组件 ，配合CSS3的动画知识，就能随心所欲地写出你想要的效果。

推荐

扩展阅读

1.《ECMAScript 6 系列》原创教程

2.《Vue2.0基础系列》原创教程

3.《ECMAScript 6 系列》的 2 套习题

4.《Vue2.0基础系列》的 1 套习题

关于职场

感悟：混口饭吃，谈不上喜欢

薪资：关于昨天的招聘薪资问题

郑州招聘：招聘前端3~5人

广州招聘：招聘前端2人

资源推荐

其实学好技术并不难，架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料！

[总价值超3万！]年薪35万以上的大牛几乎都看了！

加微信: abc15689892 免费领取，由于领取的朋友比较多，所以加微信时一定要备注：555，否则很难通过。