结果：与微信页面跳转一样的过渡动画

• 如下

123.gif

• 直接上代码

// in App.vue

<template>
    ...
      <transition :name="transitionName">
          <keep-alive :include="keepAlive">
              <router-view class="Router" ></router-view>
          </keep-alive>
      </transition>
    ...
</template>


<script>
    ...
    data() {
      return {
        keepAlive: 'main-keep-alive',  //需要缓存的页面 例如首页
        transitionName: 'slide-right', //初始过渡动画方向
      }
    },
    watch: {
      $route(to, from) {
        // 切换动画
        let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
        if (isBack) {
          this.transitionName = 'slide-left'
        } else {
          this.transitionName = 'slide-right'
        }
        this.$router.isBack = false
      }
    },
    ...
</script>


<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    max-width: 15rem;
    margin: auto;
    position: relative;

    .Router {
      position: absolute;
      height: 100%;
      transition: all .377s ease;
      will-change: transform;
      top: 0;
      backface-visibility: hidden;
      perspective: 1000;
    }
    .slide-left-enter,
    .slide-right-leave-active {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
      opacity: 0;
      transform: translate3d(100%, 0 ,0);
    }
  }

</style>

在main.js 中加入以下代码即可

window.addEventListener('popstate', function (e) {
    router.isBack = true
},false)