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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*進(jìn)入和離開的過(guò)程*/
.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 改變圖形寬度

在圖2所示的頁(yè)面中，多次單擊“改變圖形寬度”按鈕，會(huì)看到圖形寬度變化的動(dòng)畫效果，第1次單擊時(shí)，寬度逐漸縮小為0，第2次單擊時(shí)，寬度逐漸放大為200px。

猜你喜歡：

VUE優(yōu)點(diǎn)有哪些?VUE的特點(diǎn)介紹

什么是Vue？Vue的工作原理是什么？

Vue3為什么使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)？

傳智教育HTML&JS+前端課程