關(guān)于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)元素在消失后，又開始出現(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)元素離開文檔時(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類名的理解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機(jī)制(bus)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue3.0 vue.config.js 配置基礎(chǔ)的路徑問(wèn)題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎(chǔ)的路徑問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁(yè)面未刷新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
react在中后臺(tái)項(xiàng)目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問(wèn)題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊(duì)技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計(jì)與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來(lái)詳細(xì)介紹,需要的朋友可以參考下2021-09-09
vue.js默認(rèn)路由不加載linkActiveClass問(wèn)題的解決方法
這篇文章主要給大家介紹了關(guān)于vue.js默認(rèn)路由不加載linkActiveClass問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
如果你在 vue3 開發(fā)中使用了語(yǔ)法的話,對(duì)于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3 setup語(yǔ)法糖的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)
本文主要介紹了vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07