<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,如圖:
反之,如果是從顯示到隱藏(稱之為離開過渡),它會被依次添加一些類class,如圖:
注意:.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的樣式一樣,進入那一刻從右邊進場,最后離開完成那一刻,回到了右邊。(從哪里來,會哪里去)
最后我們看看效果,是不是我們想要的: