<transition /> 组件
<transition /> 组件的写法：
<transition name="box"></transition>
<transition /> 起作用
Vue 提供的 <transition /> 组件，会在下列四种清空下起作用：
- 条件渲染（使用 v-if）
- 条件展示（使用了 v-show）
- 动态组件
- 组件根节点
在上述的任意一种情况发生的时候（比如：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，如图：
效果图.png
反之，如果是从显示到隐藏（称之为离开过渡），它会被依次添加一些类class，如图：
效果图.jpg
注意：.v-enter中的v-只是前缀，如果我们 <transition/> 组件的name值为box，那么它实际的class为 .box-enter。
实战小案例
html 布局：
<div id="app" class="app">
<button class="btn">切换</button>
<div class="container">
<div v-show="showBox" class="box"></div>
</div>
</div>
Javascript 部分：
<script>
const app = new Vue({
el: "#app",
data: {
showBox: false
}
})
</script>
上面data中的 showBox 的值默认是为 fasle，我们来修改代码，实现点击切换 box 节点的显示/隐藏。
<button class="btn" @click="showBox = !showBox">切换</button>
box节点只是简单生硬的切换隐藏/显示，并没有任何过渡效果。
接着我们再修改代码：
<transition name="box">
<div v-show="showBox" class="box">i am the box</div>
</transition>
我们看到，原来的 box 节点元素，现在嵌套在了 <transition/> 组件的内部，并且 name 属性的值为 box。当我们的 showBox 再取反的时候，Vue 就会在适当的时候添加相应的 class 类名了。
比如，当它进入过渡的时候（隐藏→显示），就会依次发生：
- 添加 .box-enter
- 删除 .box-enter，添加 .box-enter-active
- 删除 .box-enter-active
当它离开过渡的时候（显示→隐藏），就会依次发生：
- 添加 .box-leave
- 删除 .box- leave，添加 .box- leave-active
- 删除 .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
网友评论