首頁技術文章正文

transition組件：進入過渡的類和3個離開過渡的類

更新時間:2021年09月09日16時47分來源:傳智教育瀏覽次數(shù):

Vue為標簽內(nèi)部的元素提供了3個進入過渡的類和3個離開過渡的類，具體如下表所示。

過渡狀態(tài)	過渡類型	說明
進入（enter）	v-enter	進入過渡的開始狀態(tài)，作用于開始的一幀
	v-enter-active	進入過渡生效的狀態(tài)，作用于整個過程
	v-enter-to	進入過渡的結(jié)束狀態(tài)，作用于結(jié)束的一幀
離開（leave）	v-leaver	離開過度的開始狀態(tài)，作用于第一幀
	v-leave-active	離開過度生效時的狀態(tài)，作用于整個過程
	v-leave-to	離開過度的結(jié)束狀態(tài)，作用于結(jié)束的一幀

在上表中6個類的生效時間如下。

●v-enter: 在元素被插入之前生效，在元素被插入之后的下一幀移除。

●v-enter-active: 在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡動畫完成之后移除。

●v-enter-to: 在元素被插入之后的下一幀生效(與此同時v-enter被移除)，在過渡動畫完成之后移除。

●v-leave: 在離開過渡被觸發(fā)時立刻生效，下一幀被移除。

●v-leave-active：在整個離開過渡的階段中應用，在離開過渡被觸發(fā)時立刻生效，在過渡完成之后移除。

●v-leave-to：在離開過渡被觸發(fā)之后的下一幀生效(與此同時v-leave被移除),在過渡動畫完成之后移除。

v-enter-active和v-leave-active可以控制進入和離開過渡的不同緩和曲線。v-enter-to和v-leave-to要求Vue 2.1.8+版本才可以使用。

以上6個CSS類名在進人和離開的過渡中切換的存在周期如圖表所示。

下面我們通過一個案例來演示如何使用內(nèi)置的class類名來實現(xiàn)過渡。在案例中，我們將通過單擊按鈕實現(xiàn)圖形寬度的隱藏與顯示。切換顯示狀態(tài)時，讓寬度從0增長到200px；具體如列1所示。

tramsition

圖1 transition過度

(1)創(chuàng)建C:\vue\chapter04\demo01.html文件，具體代碼如下:

<div id="app">
    <button @click="toggle">改變圖形寬度</button>
    <transition name="box">
        <div class="chart" v-if="show"></div>
    </transition>
</div>

在上述代碼中，第3行將標簽的name屬性值設置為box,因此，在寫CSS樣式時，相對應的類名前綴以“box-”開頭;第4行的div元素為一個長方形，使用v-if指令切換組件的可見性，通過show設置顯示的狀態(tài)，這樣在單擊按鈕時可以通過切換布爾值實現(xiàn)元素的顯示和隱藏。

(2)在demo01.html文件中編寫CSS樣式，具體代碼如下:

/*圖形的初始狀態(tài)*/
.chart {
    width: 200px;
    height: 50px;
    background-color: orange;
}

/*進入和離開的過程*/
.box-enter-active, .box-leave-active {
    transition: width 3s;        /* width的變化，動畫時間是3秒*/
}

/*進人的初始狀態(tài)和離開的結(jié)束狀態(tài)*/
.box-enter, .box-leave-to {
    width: Opx;
}

/*進人的結(jié)束狀態(tài)和離開的初始狀態(tài)*/
.box-enter-to, .box-leave {
    width: 200px;
}

(3)在demo01.html文件中編寫JavaScript代碼，具體代碼如下：

var vm = new Vue({
    el: '#app',
    data: {
        show: true,
    }
    methods: {
        toggle () {
            this.show = !this.show  
        }
    }
})

(4)在瀏覽器中打開demo01.html, 運行結(jié)果如圖2所示。

圖2 改變圖形寬度