vue路由切換之淡入淡出的簡單實(shí)現(xiàn)
路由跳轉(zhuǎn)的淡入淡出
在開發(fā)中有一種需求叫高端、大氣、上檔次。所以作為一個前端有責(zé)任讓你的程序開起來更酷炫?？梢栽陧撁媲袚Q時我們加入一些動畫效果，提升我們程序的動效設(shè)計
想讓路由有過渡動畫，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽，標(biāo)簽還需要一個name屬性
<transition name="fade" mode="in-out"> <router-view ></router-view> </transition>
css過渡類名：
組件過渡過程中，會有四個CSS類名進(jìn)行切換，這四個類名與transition的name屬性有關(guān)，比如name=”fade”,會有如下四個CSS類名：
fade-enter:進(jìn)入過渡的開始狀態(tài)，元素被插入時生效，只應(yīng)用一幀后立刻刪除。
fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時就生效，在過渡過程完成后移除。
fade-leave:離開過渡的開始狀態(tài)，元素被刪除時觸發(fā)，只應(yīng)用一幀后立刻刪除。
fade-leave-active:離開過渡的結(jié)束狀態(tài)，元素被刪除時生效，離開過渡完成后被刪除。
過渡的樣式：
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
過渡模式mode：
in-out:新元素先進(jìn)入過渡，完成之后當(dāng)前元素過渡離開。
out-in:當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入。
以上這篇vue路由切換之淡入淡出的簡單實(shí)現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目打包是我們?nèi)粘＝?jīng)常遇到的,下面這篇文章主要給大家介紹了關(guān)于Vue打包后不同版本詳細(xì)解析的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue自定義v-has指令實(shí)現(xiàn)按鈕權(quán)限判斷
這篇文章主要給大家介紹了關(guān)于Vue自定義v-has指令實(shí)現(xiàn)按鈕權(quán)限判斷的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計器自定義組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vant時間控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Element中Select選擇器的實(shí)現(xiàn)
本文主要介紹了Element中Select選擇器的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問題說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動功能的代碼
BetterScroll 是一款重點(diǎn)解決移動端（已支持 PC）各種滾動場景需求的插件，BetterScroll 是使用純 JavaScript 實(shí)現(xiàn)的，這意味著它是無依賴的。本文基于better-scroll 實(shí)現(xiàn)歌詞聯(lián)動功能，感興趣的朋友跟隨小編一起看看吧2020-05-05