路由切换动画

<transition :name="transitionName">
  <router-view class="transitionBody"></router-view>
</transition>

data() {
  return {
    transitionName: 'transitionLeft',
    $route: this.$route,
  };
},

watch: {
  $route: (to, from) => {
    const arr = ['/pageA', '/pageB', '/pageC', '/pageD'];
    const compare = arr.indexOf(to.path) > arr.indexOf(from.path);
    this.transitionName = compare ? 'transitionLeft' : 'transitionRight';
  }
},

// 过度动画，效果不太好，待优化
.transitionBody{
  transition: all 0.2s linear;
}
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}