✨ add transition between routes

Fixes Page transition effect should be implemented #13

src/layouts/default.vue

@@ -9,8 +9,14 @@
     <n-layout :native-scrollbar="false" position="static">
       <div class="main-content flex-1 bg-slate-100 dark:bg-slate-800 dark:text-white my-2 mr-2">
         <Navbar />
-        <div class="p-3">
-          <RouterView />
+        <div class="p-3 relative">
+          <router-view v-slot="{ Component, route }">
+            <transition name="route" mode="out-in">
+              <div :key="route">
+                <component :is="Component" />
+              </div>
+            </transition>
+          </router-view>
         </div>
       </div>
     </n-layout>

src/styles/main.css

@@ -25,3 +25,4 @@ html.dark {
   width: 100%;
   height: 2px;
 }
+

src/styles/main.scss

@@ -61,3 +61,35 @@ body {
 @import 'utils/override';
 @import 'utils/animations';
 
+
+// .fade-enter-active,
+// .fade-leave-active {
+//   transition: opacity 0.5s ease;
+// }
+
+// .fade-enter-from,
+// .fade-leave-to {
+//   opacity: 0;
+// }
+
+// .slide-fade-enter-active {
+//   position: absolute;
+//   inset: 0;
+//   z-index:10;
+//   transition: all 0.3s ease-out;
+//   background: #FFF;
+// }
+
+// .slide-fade-leave-active {
+//   position: absolute;
+//   inset: 0;
+//   z-index: 1;
+//   background: #FFF;
+//   transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+// }
+
+// .slide-fade-enter-from,
+// .slide-fade-leave-to {
+//   transform: translateY(20px);
+//   opacity: 0;
+// }

src/styles/utils/_animations.scss

@@ -44,4 +44,25 @@
         -webkit-transform: rotateZ(0);
         transform-origin: 50% 0%;
     }
-}
+}
+
+// router-animation 
+
+.route-enter-from {
+    opacity: 0;
+    transform: translateY(100px);
+}
+
+.route-enter-active {
+    transition: all 0.3s ease-out;
+
+}
+
+.route-leave-to {
+    opacity: 0;
+    transform: translateY(-100px);
+}
+
+.route-leave-active {
+    transition: all 0.3s ease-in;
+}

vite.config.ts

@@ -51,7 +51,6 @@ export default defineConfig({
     AutoImport({
       imports: [
         'vue',
-        'vue-router',
         'vue/macros',
         'vue-i18n',
         '@vueuse/head',