vue transition組件及常用屬性
更新時(shí)間：2024年09月11日 12:14:19 作者：monstkl
在使用Vue過(guò)渡動(dòng)畫(huà)時(shí),注意選擇器優(yōu)先級(jí),謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來(lái)定義動(dòng)畫(huà)的持續(xù)時(shí)間和樣式,感興趣的朋友跟隨小編一起看看吧
可能不生效的幾個(gè)注意點(diǎn)
- 選擇器的優(yōu)先級(jí)
- 謹(jǐn)慎合并樣式
顯示三階段和隱藏三階段的class名
1、vue2中顯示的初始階段類名是：v-enter；隱藏的初始階段類名是：v-leave
2、v-enter-active、v-leave-active這兩個(gè) class 可以被用來(lái)定義動(dòng)畫(huà)的持續(xù)時(shí)間、延遲與速度曲線類型。其他class可以定義顯示開(kāi)始和結(jié)束時(shí)的樣式、隱藏開(kāi)始和結(jié)束時(shí)的樣式。
.v-enter-active,
.v-leave-active {
// transition: all 0.5s ease;
transition：opacity 0.5s ease；
}
.v-enter-from{opacity: 0;}
.v-enter-to{opacity: 1;}
.v-leave-from{opacity: 1;}
.v-leave-to {opacity: 0;}常用屬性
<Transition
name="custom-classes"
appear
duration="2000"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">hello</p>
</Transition>
.custom-classes-enter-from{opacity:1}- name 替代class前綴
- enter-active-class 覆蓋相應(yīng)階段的class名
- leave-active-class 覆蓋相應(yīng)階段的class名
- appear 初始也有效果
- duration（單位：毫秒）
快速使用animate庫(kù)
1、安裝animate庫(kù)，并在main.js中引入
npm i animate.css import 'animate.css'
2、使用庫(kù)中的類名來(lái)設(shè)置enter-active-class屬性和 leave-active-class屬性
<Transition enter-active-class="animate__animated animate__tada" leave-active-class="animate__animated animate__bounceOutRight" >
到此這篇關(guān)于vue transition組件的文章就介紹到這了,更多相關(guān)vue transition組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目多環(huán)境配置(.env)的實(shí)現(xiàn)
最常見(jiàn)的多環(huán)境配置，就是開(kāi)發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項(xiàng)目多環(huán)境配置的實(shí)現(xiàn)，感興趣的可以了解一下2021-07-07
vue.js 實(shí)現(xiàn)圖片本地預(yù)覽 裁剪 壓縮 上傳功能
這篇文章主要介紹了vue.js 實(shí)現(xiàn)圖片本地預(yù)覽裁剪壓縮上傳功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-03
vue如何實(shí)現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實(shí)現(xiàn)清空this.$route.query的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue仿今日頭條實(shí)例詳解，并把相關(guān)代碼做了說(shuō)明，對(duì)此有興趣的朋友參考下吧。2018-02-02
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認(rèn)事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認(rèn)行為立即執(zhí)行）,這些修飾符可以幫助開(kāi)發(fā)者更靈活地控制事件的處理方式2025-02-02
快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問(wèn)題
今天小編就為大家分享一篇快速解決vue在ios端下點(diǎn)擊響應(yīng)延時(shí)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue3.0實(shí)踐之寫(xiě)tsx語(yǔ)法實(shí)例
很久不寫(xiě)博客了,最近在使用ts和tsx開(kāi)發(fā)vue類項(xiàng)目,網(wǎng)上資料比較少,順便記錄一下方便同樣開(kāi)發(fā)的人互相學(xué)習(xí)共同進(jìn)步,下面這篇文章主要給大家介紹了關(guān)于vue3.0實(shí)踐之寫(xiě)tsx語(yǔ)法的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue日期組件,支持vue1.0和2.0，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
公司的大數(shù)據(jù)工作組就需要通過(guò)數(shù)據(jù)大屏展示一些處理過(guò)后有價(jià)值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
在vue項(xiàng)目中,和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫(kù),它是基于promise的http庫(kù),下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-10-10