/* * TRANSICIONES ENTRE PÁGINAS de la web pública. * --------------------------------------------------------------------- * Cross-fade de documento a documento con la View Transitions API. No * hay JavaScript detrás: `@view-transition { navigation: auto }` hace * que el navegador tome una instantánea de la página que se abandona, * cargue la siguiente y funda una en otra. Navegar deja de ser un * parpadeo en blanco. * * DEGRADACIÓN: un navegador sin soporte ignora la regla entera (es * sintaxis desconocida) y navega como siempre. No hay nada que * detectar ni ningún camino alternativo que mantener. * * FICHERO PROPIO y no `web/web.css` A PROPÓSITO: `web.css` es un * fichero de 2.300 líneas que están tocando otras ramas en paralelo, y * cuatro reglas nuevas no valen un conflicto de merge en el CSS que * pinta el sitio entero. * * ALCANCE: sólo la web pública. El layout que lo carga es * `layouts/public.twig`; el ERP (`layouts/base.twig`) no lo enlaza, así * que ninguna pantalla con sesión cambia de comportamiento. * * ANTI-FOUC DEL TEMA: intacto. `web/theme-boot.js` corre antes del * primer pintado del documento NUEVO, igual que sin transiciones; lo * que se ve durante los 180 ms es la instantánea del documento VIEJO, * que ya tenía su tema aplicado. En un cambio de tema no interviene: * `window.ierpTheme` no navega, sólo escribe la clase en ``. */ @view-transition { navigation: auto; } /* * 180 ms: por debajo se percibe como un corte y por encima empieza a * estorbar a quien navega rápido. La curva es la misma que usa el resto * del sitio (`--ease-standard` de `shared/tokens.css`), con un valor * literal de reserva por si esta hoja se cargara sin los tokens. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)); } /* * Quien pide menos movimiento no quiere un fundido tampoco: se apaga la * transición de navegación entera y el navegador vuelve al cambio de * página instantáneo. */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }