11、用 transition 组件轻松实现过渡效果

<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