關(guān)于vue.js過渡css類名的理解(推薦)
首先附上官方文檔圖。
總體就是在解釋v-enter,v-enter-active,v-leave,v-leave-active的意思，但是我看了半天，就是看不懂，老是和鼠標的mouseover和mouseout事件聯(lián)想在一起，在經(jīng)過多方的查找，總算是理解了，以下就是我所理解的意思，希望對路過的有所幫助，更希望路過的能幫我檢查檢查。
start:
首先，通過一個例子來說明，實踐是檢驗真理的唯一標準。
結(jié)果：點擊按鈕，show=false時，div消失；再次點擊，show=true，div用藍色逐漸變成橙色，過渡時間為3s。
將樣式更改為：
結(jié)果：點擊按鈕，show=false時，div逐步從橙色變成藍色，過渡時間為3s。
通過以上兩個例子，v-enter和v-leave的區(qū)別已經(jīng)顯而易見了。
v-enter:定義目標元素在消失后，又開始出現(xiàn)時的狀態(tài)；
v-leave:定義目標元素正準備消失時的狀態(tài)；
但是以上兩個都是一瞬間的事情，就好比flash動畫的一幀內(nèi)容，至于第二幀至結(jié)尾的內(nèi)容就交給v-enter-ative和v-leave-active了。
v-enter-active：定義目標元素出現(xiàn)在文檔中的最終狀態(tài)（最后一幀）；
v-leave-active：定義目標元素離開文檔時的最終狀態(tài)（最后一幀），展現(xiàn)完這一狀態(tài)后就消失了。
另外，過渡的效果transition都定義在上面的兩個樣式中，也難怪官方文檔中v-enter-active和v-leave-active表示的是一段距離。
注意：這兩個樣式一定要定義在對應的v-enter或者v-leave之前，否則顯示是無效的。
以上所述是小編給大家介紹的關(guān)于vue.js過渡css類名的理解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機制(bus)的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎(chǔ)的路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
react在中后臺項目中由于在處理復雜的業(yè)務邏輯或組件的復用問題比vue優(yōu)雅而被人認可，但也更需要團隊技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來詳細介紹,需要的朋友可以參考下2021-09-09
vue.js默認路由不加載linkActiveClass問題的解決方法
這篇文章主要給大家介紹了關(guān)于vue.js默認路由不加載linkActiveClass問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-12-12
用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
如果你在 vue3 開發(fā)中使用了語法的話,對于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖的相關(guān)資料,需要的朋友可以參考下2022-12-12
本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07