La API View Transitions permite que el navegador realice una transición cruzada, se deslice o se transforme entre dos estados visuales, y en los navegadores modernos lo hace en cargas de página completa con una línea CSS y un atributo HTML. No hay ninguna biblioteca de animación a la vista, que es exactamente lo que hace que esta receta sea muy agradable.
Enciéndelo y nombra las piezas.
@view-transition { navigation: auto; }<img src="/img/card-1.webp" style="view-transition-name: featured-photo" />Ahora la misma foto en dos páginas se trata como la misma cosa. El navegador lo mueve entre ellos. Añade tu propio tiempo:
::view-transition-old(root) { animation-duration: 220ms; }
::view-transition-new(root) { animation-duration: 220ms; }donde parar
- Asigne el nombre de transición de vista solo a un puñado de elementos como máximo. Cada elemento nombrado es un costo de coordinación.
- Nunca nombre un contenedor de desplazamiento. Saltará, y su salto será hermoso en el peor sentido.
- Las interacciones que impulsan una URL deben animarse. Las interacciones que ahorran datos no deberían hacerlo. Las transiciones no son relevantes para lo que un usuario necesita esperar.
El navegador sabía cómo hacer una transición más fluida que el DOM.
Compatible con el 92,9 por ciento de los navegadores actuales, incluido Firefox. En el resto, nada se procesa ni se rompe: las páginas se cargan exactamente como siempre, que es exactamente lo que hace una buena mejora progresiva.