Vue - 解決路由過渡動畫抖動問題

前言

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-active{
  transition: opacity .2s ease;
}
.fade-enter-to,
.fade-leave{
  visibility: visible;
  opacity: 1;
}

最後效果