前言

Vue-Router 作為 Vue 的核心模塊，它為我們提供了基于組件的路由配置、路由參數(shù)等功能，讓單頁(yè)面應(yīng)用變得更易于管理。良好的路由管理尤為重要，比如路由攔截、路由懶加載、路由權(quán)限等都在開(kāi)發(fā)中起著至關(guān)重要的作用。同時(shí)路由還支持視圖過(guò)渡效果，沒(méi)有添加過(guò)渡動(dòng)畫(huà)的路由切換會(huì)感覺(jué)很生硬，為了提高用戶體驗(yàn)，路由過(guò)渡還是很有必要的。畢竟做出來(lái)，自己看著也舒服。

過(guò)渡動(dòng)效文檔：https://cn.vuejs.org/v2/guide/transitions.html

過(guò)渡動(dòng)畫(huà)抖動(dòng)

代碼片段

這里為路由添加一個(gè)淡入淡出的過(guò)渡效果

<div id="app">
 <main class="app-main">
 <Topbar />
 <transition name="fade">
 <router-view />
 </transition>
 </main>
</div>
.fade-enter,
.fade-leave-to{
 visibility: hidden;
 opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

效果

圖中可以很明顯的看到，切換路由時(shí)，頁(yè)面會(huì)發(fā)生抖動(dòng)，而且抖動(dòng)的還不小，看著強(qiáng)迫癥都犯了。
那么問(wèn)題來(lái)了，為什么會(huì)出現(xiàn)這種情況?

過(guò)程

發(fā)現(xiàn)問(wèn)題

排除代碼問(wèn)題后，想到的可能是布局問(wèn)題引發(fā)的這種情況，于是在chrome的調(diào)試工具中，一邊切換路由一邊觀察布局的變化，終于找到了一點(diǎn)蹊蹺

仔細(xì)觀察html的結(jié)構(gòu)，會(huì)發(fā)現(xiàn)在路由過(guò)渡的過(guò)程中是會(huì)同時(shí)存在兩個(gè)路由，一個(gè)是即將進(jìn)入的路由，一個(gè)是即將消失的路由，這時(shí)想到有沒(méi)有可能是其中一個(gè)路由占位導(dǎo)致抖動(dòng)？

印證猜想

為了方便觀察布局情況，將過(guò)渡的時(shí)間調(diào)大到30s，再次重復(fù)上面的操作

在緩慢的過(guò)渡，可以更加清晰的看到，在切換到下一個(gè)路由（fade-enter-to）時(shí)，上一個(gè)路由（fade-leave-to）會(huì)占位使得下一個(gè)路由的位置下移，所以在快速過(guò)渡的情況才發(fā)生類似抖動(dòng)的效果
既然問(wèn)題找到了，那就找辦法來(lái)解決它！

解決問(wèn)題

只需要給fade-leave-to路由添加 display:none，讓其在消失時(shí)不占位就可以解決問(wèn)題。當(dāng)然還可以使用定位來(lái)脫離文檔流來(lái)解決，但定位之后偏移量等都需要計(jì)算，不太推薦。

.fade-enter{
 visibility: hidden;
 opacity: 0;
}
.fade-leave-to{
 display: none;
}
.fade-enter-active,
.fade-leave-active{
 transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
 visibility: visible;
 opacity: 1;
}

最后效果

總結(jié)

以上所述是小編給大家介紹的Vue 解決路由過(guò)渡動(dòng)畫(huà)抖動(dòng)問(wèn)題，希望對(duì)大家有所幫助！