Catálogo · Todo el sitio
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.
Encaja mejor en: cualquier sitio — un sitio por el que se pasa de página en página y donde quieres que el cambio resulte más suave
Ejemplo
Este sitio la usa. Sigue un enlace a otra página: la página que dejas se desvanece mientras aparece la siguiente, en 0,2 segundos.
Open the announcement page or the search page, then come back with the Back button.
Nothing happens if your reader asked for reduced motion, in Firefox, or on the first load of a page.
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.
Código
Copiar el marcado
import "@luz-ds/catalog/components/page-transition.css";<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/page-transition.min.css" integrity="sha384-GsqR+xHLk9aIrM1VSOFUNPawklWIz22hiY8HI7pyriRycpgyDLTu5SOO2Fh9rPYW" crossorigin="anonymous">Enlaza la hoja de estilos en el <head> 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.
<a href="/docs/">Documentation</a>Variantes y opciones
No hay ninguna: una transición fija, sin ajustes ni control.
| Regla | Efecto |
|---|---|
@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.
Contraste y foco están en la pestaña Diseño.
Diseño
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.
Qué hacer y qué no
Redactar el contenido
No tiene texto. Describe un cambio de página con tus palabras, como siempre: un enlace dice adónde lleva, y el título de la página nueva dice dónde estás.
Contraste y foco
No pinta ningún color propio, así que no hay ningún par que medir. Las imágenes que funde son las propias páginas, cada una en el modo del lector.
- Foco: el contorno de 2 px de
--luz-focus-ringde la página forma parte de la imagen y se desvanece con ella. - En colores forzados y en papel no cambia nada.
Tokens que usa
Los 2 tokens que leen las reglas de components/page-transition.css del catálogo, agrupados por familia. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Motion
--luz-duration-base,--luz-easing-standard
Teclado y ARIA están en la pestaña Código.