.twofade-enter {transform: translateX(100%);}
.twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;}
.twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;}
.twofade-leave-to {transform: translateX(-100%);}
.threefade-enter {transform: translateX(-100%);}
.threefade-leave-to {transform: translateX(100%);} 
.threefade-enter-active {transition: all 0s;position: absolute;z-index: 2;}
.threefade-leave-active {transition: all .3s;position: absolute;z-index: 999;height: 100%;background:#ececec;}

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

export default {
  name:"App",
  data(){
    return{
      transitionName:""
    }
  }
}

watch:{
    $route(to, from) {
      if(to.meta.index > from.meta.index){
        this.transitionName = 'twofade';
      }else if(to.meta.index < from.meta.index){
        this.transitionName = 'threefade';
      }
    }
  }

#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
  &>div{width: 100%;min-height: 100vh;}
}