Vue3如何实现路由左右切换过渡动画？

前言

你是否也想要实现丝滑地路由左右切换的过渡动画？
那你有没有什么好的实现方案呢？
想用插件，但vue3的插件很有限，大多数插件都不支持vue3？
来看看这篇文章，简单的几行代码，帮你解决困扰。

核心实现代码

App.vue

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="typeof route.meta.transition === 'string' ? route.meta.transition : 'slide-left'" mode="out-in">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

<style>
.slide-left-enter-active,
.slide-right-enter-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}
</style>

router/index.ts

加一个路由后置守卫

let historyRoutes: string[] = [];

router.afterEach((to, from) => {
  // 判断导航类型
  if (historyRoutes.includes(to.path)) {
    historyRoutes = historyRoutes.filter(item => item !== to.path);
    to.meta.transition = 'slide-right'
  } else {
    historyRoutes.push(from.path);
    to.meta.transition = 'slide-left'
  }
})

历史记录里面没有的时候往里面添加from的path，页面设置从左边进入
历史记录里面有的话就从历史记录里面删除，页面设置从右边进入

结语

一段很简单的代码，希望对你有帮助。
有用到的朋友，留下一个关注和赞。
关注我，不迷路，不定时分享前端页面开发中遇到小问题以及好的解决方案。