首頁(yè)技術(shù)文章正文

transition組件：進(jìn)入過(guò)渡的類(lèi)和3個(gè)離開(kāi)過(guò)渡的類(lèi)

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

Vue為標(biāo)簽內(nèi)部的元素提供了3個(gè)進(jìn)入過(guò)渡的類(lèi)和3個(gè)離開(kāi)過(guò)渡的類(lèi)，具體如下表所示。

過(guò)渡狀態(tài)	過(guò)渡類(lèi)型	說(shuō)明
進(jìn)入（enter）	v-enter	進(jìn)入過(guò)渡的開(kāi)始狀態(tài)，作用于開(kāi)始的一幀
	v-enter-active	進(jìn)入過(guò)渡生效的狀態(tài)，作用于整個(gè)過(guò)程
	v-enter-to	進(jìn)入過(guò)渡的結(jié)束狀態(tài)，作用于結(jié)束的一幀
離開(kāi)（leave）	v-leaver	離開(kāi)過(guò)度的開(kāi)始狀態(tài)，作用于第一幀
	v-leave-active	離開(kāi)過(guò)度生效時(shí)的狀態(tài)，作用于整個(gè)過(guò)程
	v-leave-to	離開(kāi)過(guò)度的結(jié)束狀態(tài)，作用于結(jié)束的一幀

在上表中6個(gè)類(lèi)的生效時(shí)間如下。

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

●v-enter-active: 在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡動(dòng)畫(huà)完成之后移除。

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

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

●v-leave-active：在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡完成之后移除。

●v-leave-to：在離開(kāi)過(guò)渡被觸發(fā)之后的下一幀生效(與此同時(shí)v-leave被移除),在過(guò)渡動(dòng)畫(huà)完成之后移除。

v-enter-active和v-leave-active可以控制進(jìn)入和離開(kāi)過(guò)渡的不同緩和曲線(xiàn)。v-enter-to和v-leave-to要求Vue 2.1.8+版本才可以使用。

以上6個(gè)CSS類(lèi)名在進(jìn)人和離開(kāi)的過(guò)渡中切換的存在周期如圖表所示。

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

tramsition

圖1 transition過(guò)度

(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行將標(biāo)簽的name屬性值設(shè)置為box,因此，在寫(xiě)CSS樣式時(shí)，相對(duì)應(yīng)的類(lèi)名前綴以“box-”開(kāi)頭;第4行的div元素為一個(gè)長(zhǎng)方形，使用v-if指令切換組件的可見(jiàn)性，通過(guò)show設(shè)置顯示的狀態(tài)，這樣在單擊按鈕時(shí)可以通過(guò)切換布爾值實(shí)現(xiàn)元素的顯示和隱藏。

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

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

/*進(jìn)入和離開(kāi)的過(guò)程*/
.box-enter-active, .box-leave-active {
    transition: width 3s;        /* width的變化，動(dòng)畫(huà)時(shí)間是3秒*/
}

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

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

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

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

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

圖2 改變圖形寬度