vue項目頁面跳轉(zhuǎn)，加轉(zhuǎn)場動畫，如何去掉白色間隙？

不多累贅，標(biāo)題已經(jīng)說的很清楚，直接上代碼，App.vue如下：

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>
  </div>
</template>
<script>
    export default {
      name: 'App',
      data() {
        return {
          transitionName: 'slide-top'
        }
      }
</script>
<style>
  *{margin: 0; padding: 0;}
  body{
    overflow: hidden;
  }
  #app {
    font-family: '微軟雅黑', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #fff;
    font-size: 14px;
  }

  .Router {
    position: absolute;
    -moz-transition: all 1.0s linear 0s;
    -webkit-transition: all 1.0s linear 0s;
    -o-transition: all 1.0s linear 0s;
    -ms-transition: all 1.0s linear 0s;
    transition: all 1.0s linear 0s;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  .slide-top-enter{
    opacity: 1;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
  .slide-top-leave-active {
    opacity: 1;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }

  .slide-bottom-enter{
    opacity: 1;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
  .slide-bottom-leave-active {
    opacity: 1;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }

</style>

效果很好，美中不足的是，中間一條白線，如果把動畫方式改成ease，白色間隙時而更寬，有點影響體驗，不知道我哪里設(shè)置錯了，導(dǎo)致這種情況？有知道的大蝦可以為我解惑答疑？