is not too cumbersome. The title has been stated very clearly. Go directly to the code. The App.vue is as follows:

<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;
  }
  -sharpapp {
    font-family: "", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: -sharpfff;
    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>

the effect is very good, the only drawback is that the middle white line, if the animation mode is changed to ease, white gap is sometimes wider, a little affect the experience, I do not know what I set wrong, resulting in this situation? Do you have any prawns who can answer questions for me?