前言

Vue-Router 作為 Vue 的核心模組，它為我們提供了基於元件的路由配置、路由引數等功能，讓單頁面應用變得更易於管理。良好的路由管理尤為重要，比如路由攔截、路由懶載入、路由許可權等都在開發中起著至關重要的作用。同時路由還支援檢視過渡效果，沒有新增過渡動畫的路由切換會感覺很生硬，為了提高使用者體驗，路由過渡還是很有必要的。畢竟做出來，自己看著也舒服。

過渡動效文件：https://cn.vuejs.org/v2/guide/transitions.html

過渡動畫抖動

程式碼片段

這裡為路由新增一個淡入淡出的過渡效果

<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;
}

效果

圖中可以很明顯的看到，切換路由時，頁面會發生抖動，而且抖動的還不小，看著強迫症都犯了。
那麼問題來了，為什麼會出現這種情況?

過程

發現問題

排除程式碼問題後，想到的可能是佈局問題引發的這種情況，於是在chrome的除錯工具中，一邊切換路由一邊觀察佈局的變化，終於找到了一點蹊蹺

仔細觀察html的結構，會發現在路由過渡的過程中是會同時存在兩個路由，一個是即將進入的路由，一個是即將消失的路由，這時想到有沒有可能是其中一個路由佔位導致抖動？

印證猜想

為了方便觀察佈局情況，將過渡的時間調大到30s，再次重複上面的操作

在緩慢的過渡，可以更加清晰的看到，在切換到下一個路由（fade-enter-to）時，上一個路由（fade-leave-to）會佔位使得下一個路由的位置下移，所以在快速過渡的情況才發生類似抖動的效果

解決問題

只需要給fade-leave-to路由新增 display:none，讓其在消失時不佔位就可以解決問題。當然還可以使用定位來脫離文件流來解決，但定位之後偏移量等都需要計算，不太推薦。

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

最後效果

總結

以上所述是小編給大家介紹的Vue 解決路由過渡動畫抖動問題，希望對大家有所幫助！