路由跳轉(zhuǎn)的淡入淡出

目前創(chuàng)新互聯(lián)建站已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、雞西梨樹網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

在開發(fā)中有一種需求叫高端、大氣、上檔次。所以作為一個(gè)前端有責(zé)任讓你的程序開起來更酷炫?？梢栽陧撁媲袚Q時(shí)我們加入一些動(dòng)畫效果，提升我們程序的動(dòng)效設(shè)計(jì)

想讓路由有過渡動(dòng)畫，需要在標(biāo)簽的外部添加標(biāo)簽，標(biāo)簽還需要一個(gè)name屬性

css過渡類名：

組件過渡過程中，會(huì)有四個(gè)CSS類名進(jìn)行切換，這四個(gè)類名與transition的name屬性有關(guān)，比如name=”fade”,會(huì)有如下四個(gè)CSS類名：

fade-enter:進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。

fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過渡過程完成后移除。

fade-leave:離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。

fade-leave-active:離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過渡完成后被刪除。

過渡的樣式：

.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)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。