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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。