From 54ac696913c0fc1afd7a49d9155ac21ce73bcedf Mon Sep 17 00:00:00 2001
From: thehrz <thehrz@outlook.com>
Date: Sun, 13 Aug 2023 14:06:11 +0800
Subject: [PATCH] pref: fix fade transition

---
 src/layouts/default.vue | 18 +++++++++---------
 src/layouts/index.vue   |  6 +++---
 src/styles/main.css     |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 496568e..a57c56d 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,14 +2,14 @@
   <v-app class="flex flex-col">
     <Nav />
 
-    <v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
-      <div class="prose max-w-110ch m-auto p-3">
-        <router-view v-slot="{ Component, route }">
-          <transition name="fade">
-            <component :is="Component" :key="route.path" />
-          </transition>
-        </router-view>
-      </div>
-    </v-main>
+    <div style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
+      <router-view v-slot="{ Component, route }">
+        <transition name="fade" mode="out-in">
+          <div :key="route.path" class="prose max-w-110ch m-auto p-3">
+            <component :is="Component" />
+          </div>
+        </transition>
+      </router-view>
+    </div>
   </v-app>
 </template>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 10c223b..d449de1 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -3,9 +3,9 @@
     <Nav />
 
     <div style="--v-layout-top: 25px" class="m-auto">
-      <router-view v-slot="{ Component }">
-        <transition name="fade">
-          <div class="">
+      <router-view v-slot="{ Component, route }">
+        <transition name="fade" mode="out-in">
+          <div :key="route.path" class="prose max-w-110ch m-auto p-3">
             <component :is="Component" />
           </div>
         </transition>
diff --git a/src/styles/main.css b/src/styles/main.css
index aa96bb0..eb3152e 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -28,7 +28,7 @@ body,
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.5s ease;
+  transition: opacity 0.3s ease;
 }
 
 .fade-enter-from,