快捷導(dǎo)航

vue transition組件及常用屬性

更新時(shí)間：2024年09月11日 12:14:19 作者：monstkl

在使用Vue過渡動(dòng)畫時(shí),注意選擇器優(yōu)先級(jí),謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來(lái)定義動(dòng)畫的持續(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)畫的持續(xù)時(shí)間、延遲與速度曲線類型。其他class可以定義顯示開始和結(jié)束時(shí)的樣式、隱藏開始和結(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)文章

簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
這篇文章主要為大家介紹了如何簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
vue項(xiàng)目如何刷新當(dāng)前頁(yè)面的方法
這篇文章主要介紹了vue項(xiàng)目如何刷新當(dāng)前頁(yè)面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-05-05
vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作
這篇文章主要介紹了vue用ant design中table表格,點(diǎn)擊某行時(shí)觸發(fā)的事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2020-10-10
Vue2.x和Vue3.x的雙向綁定原理詳解
這篇文章主要給大家介紹了關(guān)于Vue2.x和Vue3.x的雙向綁定原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue父子組件動(dòng)態(tài)傳值的幾種方式及注意問題詳解
這篇文章主要介紹了vue父子組件動(dòng)態(tài)傳值的幾種方式及注意問題詳解,需要的朋友可以參考下
2022-12-12
vue-cli4.0如何配置CDN加速
這篇文章主要介紹了vue-cli4.0如何配置CDN加速問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決
這篇文章主要介紹了vue項(xiàng)目build打包后部分樣式錯(cuò)亂的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue實(shí)現(xiàn)簡(jiǎn)單實(shí)時(shí)匯率計(jì)算功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單實(shí)時(shí)匯率計(jì)算功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
Vue3實(shí)現(xiàn)自定義Input組件的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3自定義實(shí)現(xiàn)一個(gè)類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03