También llamado Push / pop, Directional slide, Slide-over route
La nueva página entra deslizándose por un lado mientras la anterior sale, y la dirección sigue la profundidad de navegación.
Se usa en
Navegación de avance/retroceso al estilo móvil
Añade una "Slide Page Transition" (también llamada push / pop o directional slide) en [dónde].
Al avanzar, la nueva página debe entrar empujando desde el lado mientras la anterior sale por el otro; al retroceder, ambas deben moverse en la dirección opuesta: suave, acelerando y frenando con suavidad.
Vincula la dirección a la profundidad de navegación, incluido el botón Atrás del navegador, y evita que la página se desplace de lado durante el deslizamiento.
También llamado Scale transition, Zoom in / out
La página anterior se amplía o se reduce y se desvanece mientras la nueva escala hasta su lugar.
Se usa en
Entrar o salir de una jerarquía
Añade una "Zoom Page Transition" (también llamada scale transition o zoom in / out) en [dónde].
Al entrar en detalle, la página anterior debe ampliarse un poco y desvanecerse mientras la nueva crece desde un tamaño algo menor hasta su lugar; al volver, el zoom debe ir en sentido contrario: suave y rápido.
Mantén la escala sutil para que el contenido siga legible en todo momento y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).
También llamado Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
La página anterior se desvanece mientras la nueva aparece con un fundido en la misma área.
Se usa en
Cambio de ruta por defecto
Añade una "Crossfade Page Transition" (también llamada cross-dissolve o fade transition) en [dónde].
Al navegar, la página anterior debe desvanecerse mientras la nueva aparece a la vez en la misma área: suave y bastante rápida.
Mantén ambas páginas en el mismo lugar para que nada se desplace durante el fundido y mueve el foco al título principal de la nueva página tras el cambio.
También llamado Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
El contenido saliente se desvanece por completo y luego el entrante aparece con un fundido y una ligera escala.
Se usa en
Cambiar entre destinos sin relación entre sí
Añade una transición de página "Fade Through" (también llamada fade-through transition u out-in route transition) en [dónde].
Primero, el contenido saliente debe desvanecerse rápido y por completo; después, el entrante debe aparecer con un fundido mientras crece ligeramente hasta su lugar.
No dejes nunca que ambos se superpongan y evita que el diseño del contenido entrante se desplace mientras escala.