關(guān)于vue.js過渡css類名的理解(推薦)
首先附上官方文檔圖。
總體就是在解釋v-enter,v-enter-active,v-leave,v-leave-active的意思，但是我看了半天，就是看不懂，老是和鼠標(biāo)的mouseover和mouseout事件聯(lián)想在一起，在經(jīng)過多方的查找，總算是理解了，以下就是我所理解的意思，希望對路過的有所幫助，更希望路過的能幫我檢查檢查。
start:
首先，通過一個例子來說明，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。
結(jié)果：點(diǎn)擊按鈕，show=false時，div消失；再次點(diǎn)擊，show=true，div用藍(lán)色逐漸變成橙色，過渡時間為3s。
將樣式更改為：
結(jié)果：點(diǎn)擊按鈕，show=false時，div逐步從橙色變成藍(lán)色，過渡時間為3s。
通過以上兩個例子，v-enter和v-leave的區(qū)別已經(jīng)顯而易見了。
v-enter:定義目標(biāo)元素在消失后，又開始出現(xiàn)時的狀態(tài)；
v-leave:定義目標(biāo)元素正準(zhǔn)備消失時的狀態(tài)；
但是以上兩個都是一瞬間的事情，就好比flash動畫的一幀內(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)元素離開文檔時的最終狀態(tài)（最后一幀），展現(xiàn)完這一狀態(tài)后就消失了。
另外，過渡的效果transition都定義在上面的兩個樣式中，也難怪官方文檔中v-enter-active和v-leave-active表示的是一段距離。
注意：這兩個樣式一定要定義在對應(yīng)的v-enter或者v-leave之前，否則顯示是無效的。
以上所述是小編給大家介紹的關(guān)于vue.js過渡css類名的理解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue開發(fā)之不同瀏覽器的類型判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
對應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧2023-10-10
在vue2項(xiàng)目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。2017-05-05
這篇文章主要介紹了使用vue-upload上傳圖片的詳細(xì)使用說明，文中有相關(guān)的代碼示例供大家參考，感興趣的小伙伴一起跟著小編來學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue3引入uview-plus3.0移動組件庫的流程,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
Vue中的echarts圖表如何實(shí)現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時器停止執(zhí)行的問題
setinterval()是定時調(diào)用的函數(shù),可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式,這篇文章主要給大家介紹了關(guān)于vuejs如何解決瀏覽器切換頁面后setInterval計(jì)時器停止執(zhí)行的問題,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了使用vue的transition完成滑動過渡的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue webpack多頁面構(gòu)建的實(shí)例代碼
這篇文章主要介紹了vue webpack多頁面構(gòu)建的實(shí)例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue如何截取字符串，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05