Add route transitions

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">
+      <Transition name="page" mode="out-in" appear>
+        <div :key="route.fullPath">          
           <Suspense >
-        <component :is="Component"></component>
+            <template #default >
+              <component :is="Component" />
+            </template>
             <template #fallback>
               <div class="flex w-full h-full justify-center items-center">
-            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+                <SpinnerComponent :width="'16'" :height="'16'" />
               </div>
             </template>
           </Suspense>        
+        </div>
+      </Transition>      
     </template>
   </RouterView>
 </template>

src/assets/transitions.css

@@ -1,4 +1,3 @@
-
 .dropdown-enter-active,
 .dropdown-leave-active {
   transition: all 0.3s ease;
@@ -9,3 +8,14 @@
   opacity: 0;
   transform: translateY(-10px);
 }
+
+.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);
+}