# Transición de página Una página se desvanece en la siguiente cuando alguien sigue un enlace, en los navegadores que lo admiten, sin más que enlazar una hoja de estilos. ### Problemas conocidos Navegadores que la reproducen: Chrome y Edge 126 o posterior, y Safari 18.2 o posterior. Firefox todavía no la reproduce (comprobado en Firefox 155): la página cambia de golpe, como antes. Solo se reproduce entre dos páginas del mismo sitio que enlacen la hoja de estilos, cuando alguien sigue un enlace o pulsa Atrás o Adelante. No se reproduce en la primera visita, al recargar ni al escribir una dirección. ### Copiar el marcado Enlaza la hoja de estilos en el `` de todas las páginas, después de core: las líneas de arriba. En el cuerpo no cambia nada; basta un enlace normal a otra página del sitio. Link markup ```html Documentation ``` ### Variantes y opciones No hay ninguna: una transición fija, sin ajustes ni control. - `@view-transition`: Con `navigation: auto`, la página se suma. Las dos páginas de una navegación deben tenerla. - `::view-transition-old(root)`, `::view-transition-new(root)`: La página anterior y la siguiente se funden. Su duración es `--luz-duration-base` y su curva `--luz-easing-standard`. ### Cómo funciona CSS de `@luz-ds/catalog`, sin JavaScript. El navegador toma una imagen de la página que dejas y de la página a la que llegas, y pasa de una a otra con un fundido. - Todo va dentro de `@media (prefers-reduced-motion: no-preference)`, también la regla `@view-transition`. Si el lector pide movimiento reducido, no empieza ninguna transición. - Se desvanece la página entera. Nada se desliza, y la cabecera y la barra lateral no tienen nombre propio. - El modo de color del lector se fija antes del primer pintado de cada página, así que el fundido nunca muestra otro modo. - La página no se puede usar durante los 0,2 segundos que dura el fundido. ### Sin JavaScript No cambia nada: no hay ningún script. ### Teclado y ARIA - **Foco:** aterriza donde lo haría sin la transición, al principio de la página nueva. Los enlaces para saltar al contenido y las anclas funcionan como siempre. - **Lectores de pantalla:** no se añade ni se anuncia nada; el título y el contenido de la página nueva se leen como en cualquier navegación. ### Cuándo usarla Úsala en un sitio por el que se pasa por varias páginas y donde quieres que el cambio resulte más suave, sin más trabajo que un enlace. ### Cuándo no usarla No la uses para animar una parte de la página, como una cabecera que se queda quieta o una imagen que crece hasta la página siguiente: eso necesita un `view-transition-name` en cada una y lo escribes tú. - No la uses donde el cambio de página deba verse instantáneo, como en un formulario que se rellena muchas veces. - No ofrezcas un interruptor para ella. Quien quiere menos movimiento ya lo ha dicho, y la transición se detiene.