feat(transition): 添加页面切换滑动动画效果

app/app.vue

@@ -14,27 +14,68 @@ const mode = computed(() => {
   return color.value
 })
 
+// 添加路由中间件来处理过渡方向
+const router = useRouter()
+const route = useRoute()
+const slideDirection = ref('slide-left')
+
+// 记录路由历史
+const routeHistory = ref([])
+
+router.beforeEach((to, from) => {
+  // 记录路由历史
+  routeHistory.value.push(from.path)
+  
+  // 如果是返回操作（在历史记录中找到目标路由）
+  if (routeHistory.value.includes(to.path)) {
+    slideDirection.value = 'slide-right'
+    // 清除历史记录到返回的位置
+    const index = routeHistory.value.indexOf(to.path)
+    routeHistory.value = routeHistory.value.slice(0, index)
+  } else {
+    slideDirection.value = 'slide-left'
+  }
+})
+
+// 提供过渡名称给页面组件
+provide('slideDirection', slideDirection)
 </script>
 
 <template>
-  <VanConfigProvider :theme="mode" >
+  <VanConfigProvider :theme="mode">
     <NuxtLoadingIndicator
       color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
     <NuxtLayout>
-      <NuxtPage/>
+      <NuxtPage :transition="{
+        name: slideDirection
+      }" />
     </NuxtLayout>
   </VanConfigProvider>
 </template>
 
 <style>
-.page-enter-active,
+.slide-left-enter-active,
-.page-leave-active {
+.slide-left-leave-active,
-  transition: all 0.2s;
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: absolute;
+  width: 100%;
 }
 
-.page-enter-from,
+.slide-left-enter-from {
-.page-leave-to {
+  transform: translateX(100%);
-  opacity: 0;
+}
-  filter: blur(1rem);
+
+.slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+.slide-right-enter-from {
+  transform: translateX(-100%);
+}
+
+.slide-right-leave-to {
+  transform: translateX(100%);
 }
 </style>

nuxt.config.js

@@ -90,9 +90,9 @@ export default defineNuxtConfig({
   },
 
   app: {
-    pageTransition: {
+    layoutTransition: { 
-      name: 'page',
+      name: 'layout',
-      mode: 'out-in',
+      mode: 'out-in'
     },
     head: {
       viewport: 'width=device-width,initial-scale=1,viewport-fit=cover',