Crea transiciones cinematográficas entre diferentes vistas o estados de tu aplicación con el mínimo esfuerzo de código.
Tradicionalmente, animar el cambio de una página a otra requería manipular el DOM pesadamente con JS o usar frameworks complejos. La **View Transitions API** permite que el navegador capture una 'foto' del estado viejo y otra del nuevo, y las anime entre sí automáticamente.
El concepto clave es el seudoelemento `root`. Cuando ocurre una transición, el navegador genera un árbol de elementos temporales que podemos estilizar para personalizar cómo desaparece lo antiguo y cómo entra lo nuevo.
En esta lección aprenderemos a controlar la transición global de la página y a personalizar la duración y el tipo de animación de esa transición.
Old vs New.
Cuando activas una transición (vía `document.startViewTransition`), el navegador crea seudoelementos especiales:
- `::view-transition-old(root)`: La captura de pantalla del estado anterior.
- `::view-transition-new(root)`: La vista en vivo del nuevo estado.
Por defecto, el navegador hace un desvanecimiento suave (cross-fade). Pero podemos cambiar esto usando animaciones estándar de CSS.
Control total sobre el root.
Para que la transición sea única, podemos aplicar `@keyframes` a estos seudoelementos. Por ejemplo, podemos hacer que la página vieja se deslice hacia la izquierda mientras la nueva entra desde la derecha.
Un punto vital es la propiedad `view-transition-name`. Si la asignas a un elemento específico (como una imagen), el navegador la animará de forma independiente al resto de la página, creando un efecto de 'vuelo' impresionante.
Crea transiciones cinematográficas entre diferentes vistas o estados de tu aplicación con el mínimo esfuerzo de código.
Código del tema: display: grid; gap: 1rem;
Old vs New.
Cuando activas una transición (vía `document.startViewTransition`), el navegador crea seudoelementos especiales:
- `::view-transition-old(root)`: La captura de pantalla del estado anterior.
- `::view-transition-new(root)`: La vista en vivo del nuevo estado.
Por defecto, el navegador hace un desvanecimiento suave (cross-fade). Pero podemos cambiar esto usando animaciones estándar de CSS.
Control total sobre el root.
Para que la transición sea única, podemos aplicar `@keyframes` a estos seudoelementos. Por ejemplo, podemos hacer que la página vieja se deslice hacia la izquierda mientras la nueva entra desde la derecha.
Un punto vital es la propiedad `view-transition-name`. Si la asignas a un elemento específico (como una imagen), el navegador la animará de forma independiente al resto de la página, creando un efecto de 'vuelo' impresionante.