<transition /> 組件

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

<transition /> 起作用

• 條件渲染（使用 v-if）
• 條件展示（使用了 v-show）
• 動態組件
• 組件根節點

在上述的任意一種情況發生的時候（比如：v-show 的值為 true 切換成 false 的時候），我們可以給 <transition /> 組件包含的節點元素添加 entering/leaving 過渡動畫效果。

過渡原理分析

• 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。

實戰小案例

<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