vue.js過(guò)渡css類名的示例分析

這篇文章主要為大家展示了“vue.js過(guò)渡css類名的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue.js過(guò)渡css類名的示例分析”這篇文章吧。

首先附上官方文檔圖。

　　總體就是在解釋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)畫的一幀內(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ú)效的。

以上是“vue.js過(guò)渡css類名的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！