Vue3基于路由路径path的切换动画

原创于 2024-09-15 23:44:46 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

适用于APP或小程序内嵌H5场景。

// CSS魔改自：https://segmentfault.com/a/1190000041592406

// 移动端覆盖内容处理，下面为移动端补丁
router.beforeEach((to, from) => {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  to.meta.transition = toDepth > fromDepth ? 'scale-slide-right' : 'scale-slide-left'
})

<div class="h-[calc(100vh-56px)] relative">
  <RouterView
    class="absolute"
    v-slot="{ Component, route }"
    @generate="console.log">
    <Transition :name="route.meta.transition as string">
      <KeepAlive>
        <Component :is="Component" />
      </KeepAlive>
    </Transition>
  </RouterView>
</div>

.scale-slide-right-enter-active,
.scale-slide-right-leave-active {
  transition: all 0.3s ease;
}

.scale-slide-right-enter-from {
  left: 100%;
}

.scale-slide-right-enter-to {
  left: 0%;
}

.scale-slide-right-leave-from {
  transform: scale(1);
}

.scale-slide-right-leave-to {
  transform: scale(0.8);
}

.scale-slide-left-enter-active,
.scale-slide-left-leave-active {
  transition: all 0.3s ease;
}

.scale-slide-left-enter-from {
  left: -100%;
}

.scale-slide-left-enter-to {
  left: 0%;
}

.scale-slide-left-leave-from {
  transform: scale(1);
}

.scale-slide-left-leave-to {
  transform: scale(0.8);
}