Vue3?路由頁面切換動(dòng)畫?animate.css效果
更新時(shí)間：2023年09月08日 12:14:39 作者：月下脆竹書閣
這篇文章主要介紹了Vue3路由頁面切換動(dòng)畫animate.css效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
animate.css官網(wǎng)
可以通過以下的內(nèi)容，
來獲取自己想要的動(dòng)態(tài)切換樣式
1 路由動(dòng)畫transition或者在組件中控制使用animate
- 安裝
npm install animate.css
- 在main.ts中引入
import 'animate.css/animate.min.css' //引入動(dòng)畫
- 使用
在需要切換路由的頁面中添加如下內(nèi)容
html
<router-view v-slot="{ Component }">
<transition name="router_animate">
<component :is="Component" />
</transition>
</router-view>css
.router_animate-enter-active {
animation: slideInLeft 0.5s;
}
.router_animate-leave-active {
animation: slideOutLeft 0.3s;
}1.2 呈現(xiàn)結(jié)果
2 用于組件
控制類名是否加在元素上，值得注意的是，元素前面要加上
animate__animated的前綴，下圖：控制是否顯示animate__bounce這個(gè)動(dòng)畫，flipinIn為true的時(shí)候
const flipinIn = ref(false);
<el-button type="primary" @click=" flipinIn= true">animate.css實(shí)現(xiàn)</el-button>
<h1 class="animate__animated" :class="{animate__bounce:flipinIn}">動(dòng)畫文字</h1>2.1 呈現(xiàn)結(jié)果
到此這篇關(guān)于Vue3 路由頁面切換動(dòng)畫 animate.css效果的文章就介紹到這了,更多相關(guān)Vue3 路由頁面切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了Vue自定義多選組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了vue3沒有this的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue科學(xué)計(jì)數(shù)法常見處理方法舉例
這篇文章主要給大家介紹了關(guān)于Vue科學(xué)計(jì)數(shù)法常見處理方法的相關(guān)資料,科學(xué)計(jì)數(shù)法是科學(xué)家用來表示很大或很小的數(shù)字的一種方便的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue-plugin-hiprint 詳細(xì)使用說明,使用Vue.Draggable庫構(gòu)建可拖拽元素的示例,你可以根據(jù)具體需求和技術(shù)選型選擇適合的庫或方法來實(shí)現(xiàn)可拖拽元素的功能,需要的朋友可以參考下2023-08-08
Vue數(shù)組根據(jù)對(duì)象屬性去重和數(shù)組對(duì)象去重實(shí)現(xiàn)方式
文章介紹了兩種去重方法：一種是根據(jù)對(duì)象的`id`屬性去重,另一種是根據(jù)`id`和`name`屬性去重,通過`map()`和`filter()`方法結(jié)合`indexOf()`實(shí)現(xiàn)去重2025-12-12
vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法
這篇文章主要介紹了vue中的img src 動(dòng)態(tài)加載本地json的圖片路徑寫法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟)
這篇文章主要介紹了vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
文章指出Quill 2.0.0-dev.4與2.0.2版本存在兼容性問題,原因未知,主要步驟包括引入依賴、創(chuàng)建編輯器組件、使用及效果測(cè)試2025-08-08
vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02