vue頁面切換過渡動畫 並解決切換空白問題

一般vue項目 都是拿別人弄好的，所以這種動畫已經寫好了。有的朋友是自己整的，想整個動畫。那麼 咱們 開整~~~

<transition name="slide-fade">
    <router-view class="page"></router-view>
</transition>

  .slide-fade-enter-active,
  .slide-fade-leave-active
     {
       will-change: transform;
       transition: all 500ms;
       position: absolute;
     }.slide-fade-enter {
         opacity: 0;
         transform: translate3d(-100%, 0, 0);
     }.slide-fade-leave-active {
         opacity: 0;
         transform: translate3d(100%, 0, 0);
     }
     //解決空白的問題就是下面這段css
      .page {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 100%;
         margin: 0 auto;

     }

就這兩點希望對你有幫助。喊一下口號！ 阿西吧~