From 53d52f3a146cf5e1a0d3fee01b04e02c9dae624e Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Sat, 12 Oct 2024 23:53:08 -0300
Subject: [PATCH] Add route transitions

---
 src/App.vue                | 25 +++++++++++++++++--------
 src/assets/transitions.css | 14 ++++++++++++--
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 28dfc5b..49b919d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,29 @@
 <script setup lang="ts">
+import { useRoute } from 'vue-router';
 import TopBar from "@/components/TopBar/TopBar.vue";
 import SpinnerComponent from "@/components/SpinnerComponent.vue";
+
+const route = useRoute();
 </script>
 
 <template>
   <TopBar />
   <RouterView v-slot="{ Component }">
     <template v-if="Component">
-      <Suspense>
-        <component :is="Component"></component>
-        <template #fallback>
-          <div class="flex w-full h-full justify-center items-center">
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
-          </div>
-        </template>
-      </Suspense>
+      <Transition name="page" mode="out-in" appear>
+        <div :key="route.fullPath">          
+          <Suspense >
+            <template #default >
+              <component :is="Component" />
+            </template>
+            <template #fallback>
+              <div class="flex w-full h-full justify-center items-center">
+                <SpinnerComponent :width="'16'" :height="'16'" />
+              </div>
+            </template>
+          </Suspense>        
+        </div>
+      </Transition>      
     </template>
   </RouterView>
 </template>
diff --git a/src/assets/transitions.css b/src/assets/transitions.css
index 79c21ff..4ad8cc6 100644
--- a/src/assets/transitions.css
+++ b/src/assets/transitions.css
@@ -1,4 +1,3 @@
-
 .dropdown-enter-active,
 .dropdown-leave-active {
   transition: all 0.3s ease;
@@ -8,4 +7,15 @@
 .dropdown-leave-to {
   opacity: 0;
   transform: translateY(-10px);
-}
\ No newline at end of file
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}