vue项目页面跳转，加转场动画，如何去掉白色间隙？

Question

不多累赘，标题已经说的很清楚，直接上代码，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，白色间隙时而更宽，有点影响体验，不知道我哪里设置错了，导致这种情况？有知道的大虾可以为我解惑答疑？

Answer 1

y轴偏移量改下试试translate(0, -99%);