簡單談?wù)剉ue的過渡動畫(推薦)
在vue中，實(shí)現(xiàn)過渡動畫一般是下面這樣：
<transition name="fade"> <div></div> </transition>
用一個transition對元素或者組件進(jìn)行封裝.
在過渡的時候，會有 4 個(CSS)類名在 enter/leave 的過渡中切換。
1.v-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。
2.v-enter-active: 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入時生效，在 transition/animation 完成之后移除。
3.v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。
4.v-leave-active: 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)時生效，在 transition/animation 完成之后移除。
上面是官方文檔的原話，但是這4個類名如何運(yùn)用呢？下面看個例子
<transition name="fold">
<div v-show="show" class="example"></div>
</transition>
css:
.example {
width: 100px;
height: 100px;
transform: translate3d(0, -100px, 0);
}
.fold-enter-active, .fold-leave-active {
transition: all .5s;
}
.fold-enter, .fold-leave-active {
transform: translate3d(0, 0, 0);
}
當(dāng)show = true時:
這里的fold-enter，是在元素顯示的一瞬間被加入，然后瞬間被移除，在上面的例子中，example這個塊狀元素本來因?yàn)橛辛藅ransform: translate3d(0, -100px, 0)這個樣式，所以被上移了100px,但是因?yàn)閒old-enter，所以將example這個塊狀元素移到了原位，但是fold-enter因?yàn)樗查g就被移除掉了，所以這時候的元素的樣式又變成了transform: translate3d(0, -100px, 0),但是這時候fold-enter-active這個樣式就生效了，因?yàn)樵O(shè)置了transition: all .5s,所以元素會在0.5s的時間內(nèi)上移100px,在過渡動畫結(jié)束之后,fold-enter-active這個類馬上被移除.
當(dāng)show = false時:
example不會馬上消失，這個時候fold-leave-active這個類就起作用了,example這時的位置是在-100px，fold-leave-active定義的是過渡的結(jié)束狀態(tài)：transform: translate3d(0, 0, 0);，但是同時又設(shè)置了transition: all .5s，所以這時元素會在0.5s的時間內(nèi)下移100px.之后fold-leave-active被移除.
官網(wǎng)的一張圖
另外，還可以在動畫中調(diào)用js鉤子函數(shù):
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > </transition>
不過用的不多，可以在methods中定義這些方法.
以上這篇簡單談?wù)剉ue的過渡動畫(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vite基本常見配置講解的相關(guān)資料,最近做項(xiàng)目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue中可編輯樹狀表格的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
Vue請求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例
這篇文章主要介紹了Vue請求java服務(wù)端并返回?cái)?shù)據(jù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
這篇文章主要介紹了使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)，整篇文章圍繞Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的想換自來哦展開內(nèi)容,需要的小伙伴可以參考一下2021-10-10
vue3新特性中最重要、內(nèi)容最多的組合式api,組合式api既可以解決之前vue2開發(fā)的痛點(diǎn),又提升了性能,下面這篇文章主要給大家介紹了關(guān)于vue3?option?api新玩法的相關(guān)資料,需要的朋友可以參考下2022-06-06
本文主要介紹了在Vue中使用的一些常見混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對代碼進(jìn)行加固,需要的可以參考下2023-12-12
Vue3實(shí)現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中，我們會遇到各種各樣的表格數(shù)據(jù)導(dǎo)入，動態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作，減少出錯。本文為大家介紹了Vue3實(shí)現(xiàn)動態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法，需要的可以參考一下2022-11-11
調(diào)度器是vue3響應(yīng)式系統(tǒng)中一個非常重要的特性，可調(diào)度性指的是當(dāng)trigger 動作觸發(fā)副作用函數(shù)重新執(zhí)行時，有能力決定副作用函數(shù)執(zhí)行的時機(jī)、次數(shù)以及方式，本文通過代碼示例給大家介紹調(diào)度器是什么，有什么功能，怎么使用,感興趣的同學(xué)可以借鑒閱讀2023-06-06
vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何還原data中數(shù)據(jù)-重置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05