vue路由切換之淡入淡出的簡單實現(xiàn)

發(fā)布時間：2020-09-30 16:40:03 來源：腳本之家閱讀：264 作者：影夜隨風(fēng) 欄目：web開發(fā)

路由跳轉(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路由切換之淡入淡出的簡單實現(xiàn)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue路由切換之淡入淡出的簡單實現(xiàn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽