From 5edc9da769e9ea9a9fdb2ea454f8db5f44d21f94 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:18:40 +0000
Subject: [PATCH] refactor: Update route transition to slide-fade

This commit changes the route transition effect from a simple fade
to a slide-fade effect based on your feedback.

- Outgoing content now fades and slides to the right.
- Incoming content now fades and slides in from the left.

The transition duration has also been slightly increased for a
smoother visual experience.
---
 ui/src/App.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2aeb383..296e375 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -66,7 +66,7 @@ watchEffect(() => {
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
       <router-view v-slot="{ Component }">
-        <transition name="fade" mode="out-in">
+        <transition name="slide-fade" mode="out-in">
           <component :is="Component" class="flex-1 overflow-auto" />
         </transition>
       </router-view>
@@ -78,18 +78,25 @@ watchEffect(() => {
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out; /* Increased duration for a smoother slide */
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.slide-fade-enter-from {
   opacity: 0;
+  transform: translateX(-20px); /* Slide in from the left */
 }
 
-.fade-enter-to,
-.fade-leave-from {
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(20px); /* Slide out to the right */
+}
+
+/* Ensure content is fully opaque and in place when active/not transitioning */
+.slide-fade-enter-to,
+.slide-fade-leave-from {
   opacity: 1;
+  transform: translateX(0);
 }
 </style>