View-Transition CSS: Transiciones Suaves al Cambiar de Página

Podemos agregar una transición suave entre cada una de las páginas, como por ejemplo entre la vista de listado y la vista de detalle, que es lo que tenemos aquí. Esto ayuda a que el cambio no sea tan agresivo o tan brusco, sino mucho más fluido y agradable visualmente.

Para lograr esto, podemos utilizar la API de view-transition en CSS, que nos permite implementar transiciones suaves entre páginas. Con esta herramienta, también podríamos añadir animaciones para que el contenido aparezca desde un lado, desde abajo, con escalado u otros efectos visuales.

Lo único que debemos hacer es añadir lo siguiente en nuestra hoja de estilo CSS:

@view-transition {
 navigation: auto;
}

Y eso sería prácticamente todo. Con solo estas líneas ya logramos una transición visual más suave entre páginas.

Compatibilidad y soporte

El soporte es bastante amplio. Prácticamente todos los navegadores modernos lo admiten, así que podemos usarlo sin mayor problema. Si el navegador no soporta esta propiedad, simplemente la ignora y la navegación seguirá funcionando como antes, sin errores ni interrupciones:

https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition

Una vez aplicado, notarás que las transiciones entre vistas ahora tienen un suave efecto de desvanecimiento o desenfoque (blur). Esto lo explicaremos mejor en la siguiente clase, pero por ahora puedes observar que el cambio ya no es tan brusco como antes, y eso era justo lo que buscábamos.