vue transition組件及常用屬性
更新時間：2024年09月11日 12:14:19 作者：monstkl
在使用Vue過渡動畫時,注意選擇器優(yōu)先級,謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動畫的持續(xù)時間和樣式,感興趣的朋友跟隨小編一起看看吧
可能不生效的幾個注意點
- 選擇器的優(yōu)先級
- 謹(jǐn)慎合并樣式
顯示三階段和隱藏三階段的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)文章
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項目多環(huán)境配置的實現(xiàn)，感興趣的可以了解一下2021-07-07
vue.js 實現(xiàn)圖片本地預(yù)覽 裁剪 壓縮 上傳功能
這篇文章主要介紹了vue.js 實現(xiàn)圖片本地預(yù)覽裁剪壓縮上傳功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
vue如何實現(xiàn)清空this.$route.query的值
這篇文章主要介紹了vue如何實現(xiàn)清空this.$route.query的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue仿今日頭條實例詳解，并把相關(guān)代碼做了說明，對此有興趣的朋友參考下吧。2018-02-02
Vue3中的事件修飾符包括：.stop（阻止冒泡）、.prevent（阻止默認(rèn)事件）、.self（阻止自身事件）、.capture（打亂冒泡順序）、.once（事件只觸發(fā)一次）和.passive（事件默認(rèn)行為立即執(zhí)行）,這些修飾符可以幫助開發(fā)者更靈活地控制事件的處理方式2025-02-02
今天小編就為大家分享一篇快速解決vue在ios端下點擊響應(yīng)延時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
很久不寫博客了,最近在使用ts和tsx開發(fā)vue類項目,網(wǎng)上資料比較少,順便記錄一下方便同樣開發(fā)的人互相學(xué)習(xí)共同進步,下面這篇文章主要給大家介紹了關(guān)于vue3.0實踐之寫tsx語法的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue日期組件,支持vue1.0和2.0，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在vue項目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-10-10