vue transition組件及常用屬性
更新時間：2024年09月11日 12:14:19 作者：monstkl
在使用Vue過渡動畫時,注意選擇器優(yōu)先級,謹慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動畫的持續(xù)時間和樣式,感興趣的朋友跟隨小編一起看看吧
可能不生效的幾個注意點
- 選擇器的優(yōu)先級
- 謹慎合并樣式
顯示三階段和隱藏三階段的class名
1、vue2中顯示的初始階段類名是：v-enter；隱藏的初始階段類名是：v-leave
2、v-enter-active、v-leave-active這兩個 class 可以被用來定義動畫的持續(xù)時間、延遲與速度曲線類型。其他class可以定義顯示開始和結(jié)束時的樣式、隱藏開始和結(jié)束時的樣式。
.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庫
1、安裝animate庫，并在main.js中引入
npm i animate.css import 'animate.css'
2、使用庫中的類名來設(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了如何簡單實現(xiàn)vue驗證碼60秒倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue項目如何刷新當前頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue proxy 的優(yōu)勢與使用場景實現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢與使用場景實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue用ant design中table表格,點擊某行時觸發(fā)的事件操作
這篇文章主要介紹了vue用ant design中table表格,點擊某行時觸發(fā)的事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue父子組件動態(tài)傳值的幾種方式及注意問題詳解,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue-cli4.0如何配置CDN加速問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue項目build打包后部分樣式錯亂的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單實時匯率計算功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了如何使用Vue3自定義實現(xiàn)一個類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03