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