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

transition組件：進(jìn)入過渡的類和3個(gè)離開過渡的類

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

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

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

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

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

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

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

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

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

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

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

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

下面我們通過一個(gè)案例來演示如何使用內(nèi)置的class類名來實(shí)現(xiàn)過渡。在案例中，我們將通過單擊按鈕實(shí)現(xiàn)圖形寬度的隱藏與顯示。切換顯示狀態(tài)時(shí)，讓寬度從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行將標(biāo)簽的name屬性值設(shè)置為box,因此，在寫CSS樣式時(shí)，相對(duì)應(yīng)的類名前綴以“box-”開頭;第4行的div元素為一個(gè)長方形，使用v-if指令切換組件的可見性，通過show設(shè)置顯示的狀態(tài)，這樣在單擊按鈕時(shí)可以通過切換布爾值實(shí)現(xiàn)元素的顯示和隱藏。

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

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

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

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

/*進(jìn)人的結(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, 運(yùn)行結(jié)果如圖2所示。

圖2 改變圖形寬度