【vue2.0进阶篇】用transition组件轻松实现过渡效果
前端君 翻身的码农
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的动画知识，就能随心所欲地写出你想要的效果。
