Vue - h5 路由前进后退切换动画

<script setup>
router.beforeEach((to, from) => {
  const toDepth = getDepth(to.path)
  const fromDepth = getDepth(from.path)

  // 同级路由通过 level 判断前进后退
  if (toDepth === fromDepth) {
    transitionName = to.meta.level > from.meta.level ? 'go' : 'back'
    return
  }

  transitionName = toDepth > fromDepth ? 'go' : 'back'
})
</script>

<template>
  <RouterView v-slot="{ Component }">
    <Transition :name="transitionName">
      <component :is="Component" />
    </Transition>
  </RouterView>
</template>

<style>
.go-enter-from {
  transform: translate3d(100%, 0, 0);
}
.back-enter-to,
.back-enter-from,
.go-enter-to,
.go-leave-from {
  transform: translate3d(0, 0, 0);
}
.go-leave-to {
  transform: translate3d(-100%, 0, 0);
}
.go-enter-active,
.go-leave-active,
.back-enter-active,
.back-leave-active {
  transition: all 0.3s;
}
.back-enter-from {
  transform: translate3d(-100%, 0, 0);
}
.back-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>