vue路由切換之淡入淡出的簡單實(shí)現(xiàn)
路由跳轉(zhuǎn)的淡入淡出
在開發(fā)中有一種需求叫高端、大氣、上檔次。所以作為一個前端有責(zé)任讓你的程序開起來更酷炫。可以在頁面切換時我們加入一些動畫效果，提升我們程序的動效設(shè)計(jì)
想讓路由有過渡動畫，需要在<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)文章
這篇文章主要給大家介紹了關(guān)于Vue3中引入scss文件的方法步驟,在實(shí)際項(xiàng)目中,各種樣式往往有很多重復(fù)的情況,為了能夠使樣式的后續(xù)開發(fā)和維護(hù)更加愜意,將這些共同的代碼進(jìn)行命名然后調(diào)用這些變量是一個很好的選擇,需要的朋友可以參考下2023-08-08
基于vue3+threejs實(shí)現(xiàn)可視化大屏效果
本文主要主要講述對threejs的一些api進(jìn)行基本的封裝，在vue3項(xiàng)目中來實(shí)現(xiàn)一個可視化的3d項(xiàng)目，包含了一些常用的功能，場景、燈光、攝像機(jī)初始化，模型、天空盒的加載，以及鼠標(biāo)點(diǎn)擊和懸浮的事件交互,感興趣的朋友可以參考下2023-06-06
Vue3+TS+Vite+NaiveUI搭建一個項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個項(xiàng)目骨架實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了詳解.vue文件解析的實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue配置后臺接口方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue3+element-plus props中的變量使用 v-model 報(bào)錯及解決方案
這篇文章主要介紹了vue3+element-plus props中的變量使用 v-model 報(bào)錯及解決方案,prop 是單向數(shù)據(jù)流,這里只能用:model-value,不能用v-model,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)
這篇文章主要介紹了Angular和Vue雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理(重點(diǎn)是vue的雙向綁定)，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式
這篇文章主要介紹了Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue3中引入Pinia存儲庫使用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue后臺管理添加多語言功能的實(shí)現(xiàn)示例
這篇文章主要介紹了vue后臺管理添加多語言功能的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04