首先附上官方文檔圖。

總體就是在解釋v-enter,v-enter-active,v-leave,v-leave-active的意思,但是我看了半天,就是看不懂,老是和鼠標(biāo)的mouseover和mouseout事件聯(lián)想在一起,在經(jīng)過(guò)多方的查找,總算是理解了,以下就是我所理解的意思,希望對(duì)路過(guò)的有所幫助,更希望路過(guò)的能幫我檢查檢查。
start:
首先,通過(guò)一個(gè)例子來(lái)說(shuō)明,實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。

結(jié)果:點(diǎn)擊按鈕,show=false時(shí),div消失;再次點(diǎn)擊,show=true,div用藍(lán)色逐漸變成橙色,過(guò)渡時(shí)間為3s。
將樣式更改為:

結(jié)果:點(diǎn)擊按鈕,show=false時(shí),div逐步從橙色變成藍(lán)色,過(guò)渡時(shí)間為3s。
通過(guò)以上兩個(gè)例子,v-enter和v-leave的區(qū)別已經(jīng)顯而易見(jiàn)了。
v-enter:定義目標(biāo)元素在消失后,又開(kāi)始出現(xiàn)時(shí)的狀態(tài);
v-leave:定義目標(biāo)元素正準(zhǔn)備消失時(shí)的狀態(tài);
但是以上兩個(gè)都是一瞬間的事情,就好比f(wàn)lash動(dòng)畫(huà)的一幀內(nèi)容,至于第二幀至結(jié)尾的內(nèi)容就交給v-enter-ative和v-leave-active了。
v-enter-active:定義目標(biāo)元素出現(xiàn)在文檔中的最終狀態(tài)(最后一幀);
v-leave-active:定義目標(biāo)元素離開(kāi)文檔時(shí)的最終狀態(tài)(最后一幀),展現(xiàn)完這一狀態(tài)后就消失了。
另外,過(guò)渡的效果transition都定義在上面的兩個(gè)樣式中,也難怪官方文檔中v-enter-active和v-leave-active表示的是一段距離。
注意:這兩個(gè)樣式一定要定義在對(duì)應(yīng)的v-enter或者v-leave之前,否則顯示是無(wú)效的。
以上所述是小編給大家介紹的關(guān)于vue.js過(guò)渡css類(lèi)名的理解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注