From d3dc7d71c44616587ca2b0bf3708ad75c735dabb Mon Sep 17 00:00:00 2001 From: luis cespedes Date: Mon, 5 May 2025 12:48:43 -0400 Subject: [PATCH] animaciones fix uwu --- .../route-animations.component.ts | 2 +- .../components/sidebar/sidebar.component.html | 6 + .../components/sidebar/sidebar.component.scss | 105 +++++++++++++++++- 3 files changed, 111 insertions(+), 2 deletions(-) diff --git a/src/app/components/route-animations/route-animations.component.ts b/src/app/components/route-animations/route-animations.component.ts index f11b653..3c14139 100644 --- a/src/app/components/route-animations/route-animations.component.ts +++ b/src/app/components/route-animations/route-animations.component.ts @@ -19,7 +19,7 @@ import { Subscription, filter } from 'rxjs'; } .animate__animated { - animation-duration: 0.5s; + animation-duration: 1.2s; } `] }) diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html index dbd8ba2..8811b3e 100644 --- a/src/app/components/sidebar/sidebar.component.html +++ b/src/app/components/sidebar/sidebar.component.html @@ -20,6 +20,7 @@ Inicio + @@ -27,6 +28,7 @@ Unidad de Concesiones + @@ -34,6 +36,7 @@ CT Actualización de PD + @@ -41,6 +44,7 @@ CT Ajuste de PD + @@ -48,6 +52,7 @@ Resumen + @@ -55,6 +60,7 @@ Unidad de Información + diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss index e789a97..cd8a21a 100644 --- a/src/app/components/sidebar/sidebar.component.scss +++ b/src/app/components/sidebar/sidebar.component.scss @@ -76,6 +76,7 @@ .menu-item { margin: 2px 0; padding: 0 0.5rem; /* Añadimos padding lateral al ítem */ + transition: all 0.3s ease-in-out; /* Suaviza todas las transiciones */ } .menu-link { @@ -84,14 +85,16 @@ padding: 0.75rem 1rem; color: #0a2847; text-decoration: none; - transition: background-color 0.2s, box-shadow 0.3s; + transition: all 0.3s ease-in-out; /* Transición para todos los cambios */ border-left: 3px solid transparent; border-radius: .25rem; width: calc(100% - 1rem); /* Reducimos el ancho para crear margen */ + position: relative; /* Para los efectos de pseudo-elementos */ } .menu-link:hover { background-color: #a2c9ec !important; + transform: translateX(2px); /* Pequeño movimiento al hacer hover */ } .menu-icon { @@ -99,10 +102,57 @@ width: 1.25rem; text-align: center; color: #0a2847; + transition: transform 0.3s ease-in-out; /* Transición para el icono */ } .menu-text { font-size: 0.9rem; + transition: font-weight 0.3s ease-in-out, color 0.3s ease-in-out; /* Transición para el texto */ +} + +/* Efectos especiales para los ítems activos */ +.menu-item.active { + padding-left: 0.75rem; /* Añade un poco más de padding a la izquierda */ +} + +.menu-item.active .menu-icon { + transform: scale(1.2); /* Hace el icono ligeramente más grande */ + color: #0066cc; /* Color más brillante para el icono */ +} + +/* Indicador de elemento activo */ +.active-indicator { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + border-radius: 50%; + opacity: 0; + transition: all 0.3s ease-in-out; +} + +.menu-item.active .active-indicator { + opacity: 1; + background-color: #0066cc; + box-shadow: 0 0 8px 1px rgba(0, 102, 204, 0.8); + animation: pulse 1.5s infinite ease-in-out; +} + +@keyframes pulse { + 0% { + transform: translateY(-50%) scale(0.8); + opacity: 0.7; + } + 50% { + transform: translateY(-50%) scale(1.2); + opacity: 1; + } + 100% { + transform: translateY(-50%) scale(0.8); + opacity: 0.7; + } } .menu-item.active .menu-link { @@ -112,4 +162,57 @@ font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24) !important; margin: 0 auto; /* Centra el elemento */ + /* Añadir animación de entrada */ + animation: activeItemEffect 0.4s ease-in-out, glowEffect 2s ease-in-out infinite alternate; + position: relative; /* Para el efecto de resplandor */ +} + +/* Definir la animación para el elemento activo - movimiento lateral */ +@keyframes activeItemEffect { + 0% { + transform: translateX(-10px); + opacity: 0.5; + } + 50% { + transform: translateX(5px); + opacity: 0.8; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} + +/* Efecto de resplandor suave */ +@keyframes glowEffect { + 0% { + box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); + } + 100% { + box-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 10px rgba(10, 40, 71, 0.3); + } +} + +/* Añadir pseudo-elemento para un brillo en el borde izquierdo */ +.menu-item.active .menu-link::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 3px; + background-color: white; + animation: borderPulse 1.5s ease-in-out infinite; +} + +@keyframes borderPulse { + 0% { + opacity: 0.6; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.6; + } } \ No newline at end of file