Esta es la Parte 1 de nuestra serie sobre “El Futuro de Astro” cubriendo tres grandes características nuevas que tenemos planeadas para Astro en 2024. Esta publicación introduce una actualización de la View Transitions API que Astro ahora puede aprovechar para navegación de páginas nativa, similar a una app, sin una sola línea de JavaScript.
La View Transitions API es un conjunto de nuevas APIs de plataforma que desbloquean transiciones nativas del navegador entre páginas. Históricamente esto solo ha sido posible en Single Page Applications (SPAs) pesadas en JavaScript, pero los avances recientes ahora están trayendo transiciones de páginas nativas a la plataforma web.
Los usuarios de Astro han tenido acceso temprano a las view transitions desde Astro 2.9. Debido a limitaciones iniciales en el navegador, nuestro soporte temprano funcionaba inyectando un router de JavaScript en la página para gestionar las animaciones por ti. Esto nunca fue pensado como una solución a largo plazo, pero creó exitosamente un playground temprano para que nuestros usuarios exploraran:
Mira a Joe Bell demostrar las view transitions.
Prueba esta demo en vivo de Maxi Ferreira.
Nuestra apuesta era que los principales navegadores web continuarían mejorando y algún día podríamos eliminar completamente nuestro shim de router de JavaScript. Algún día, cuando un usuario hiciera clic en un enlace, ese clic podría activar una animación de transición en el navegador como parte de su flujo normal de página a página.
Estoy emocionado de anunciar que ese día finalmente ha llegado. Chrome 126 (lanzado la semana pasada) y Microsoft Edge 126 (que se lanza esta semana) ambos soportan “cross-document view transitions” desbloqueando view transitions sin JavaScript en Astro.
Demo
Tanto Chrome como Edge implementan nuevas versiones del navegador gradualmente, así que verifica que estás en la versión 126 antes de ejecutar el demo. En Chrome, puedes ver tu versión actual en chrome://settings/help. Si una actualización aún no está disponible para tu navegador, vuelve a revisar más tarde o usa un canal de lanzamiento Beta o Canary en su lugar.
Abre el demo astro-zerojs-transitions.vercel.app para experimentar view transitions sin JavaScript en tu navegador. Puedes explorar el Panel de Red de tu navegador para verificar que cada clic en un enlace activa una carga completa de la página, y cero JavaScript está siendo enviado al navegador. Si tu navegador lo soporta, el demo debería verse así:
Clon de Spotify construido con Astro View Transitions
Si tu navegador no soporta las últimas view transitions cross-domain, tu sitio web seguirá funcionando y mostrando contenido como se espera. Sin embargo, las animaciones estarán desactivadas y la navegación de páginas se comportará como cualquier otra navegación en tu navegador (sin animación).
Habilitar View Transitions sin JavaScript
Para aprovechar la nueva View Transition API nativa, es tan simple como agregar la at-rule @view-transition a tu sitio web. Aquí está todo el CSS que necesitas:
<style> @view-transition { navigation: auto; /* enabled! */ }</style>Nota: El resaltador de sintaxis CSS integrado en algunos editores de código (ej: VSCode) puede tener problemas para analizar la sintaxis más nueva de la at-rule @view-transition. Puedes agregar un comentario como /* enabled! */ a tu CSS como una solución temporal para tu resaltador.
Para habilitar las view transitions cross-document, ambos “extremos” de la transición deben incluir esta regla. Un componente de layout de página compartido puede ser un buen lugar para agregar esto a tu código.
Actualizar un Proyecto Existente
Si ya estabas usando Astro View Transitions impulsado por nuestro componente <ViewTransitions />, entonces ahora es seguro eliminar ese componente y reemplazarlo con la at-rule. Esto eliminará el router de JavaScript retrocompatible inyectado de tu página, reduciendo la complejidad general de tu código del lado del cliente.
--- import { ViewTransitions } from "astro:transitions";---<head> <ViewTransitions fallback="none" /> <style> @view-transition { navigation: auto; } <style></head>Si aún te gustaría que tus view transitions funcionen en navegadores más antiguos, eres bienvenido a seguir usando nuestro componente retrocompatible <ViewTransitions /> en su lugar. Puedes migrar cuando estés listo. No tenemos planes de eliminar el soporte para el componente <ViewTransitions /> en este momento.
¿Qué pasa con transition:persist?
Las transiciones de elementos persistentes se convirtieron en una característica popular en Astro. La directiva transition:persist le decía a Astro que persistiera un elemento a través de la navegación sin interrumpir o alterar su estado. Esto permitía que UI como reproductores de audio y video continuaran reproduciéndose a través de las páginas, como en el demo de reproductor de música de Maxi Ferreira.
Lamentablemente, esta característica aún no es soportada por la navegación cross-document nativa en el navegador. El soporte nativo para reproductores de audio y video persistentes puede llegar en el futuro, pero mientras tanto puedes continuar usando nuestro componente <ViewTransitions /> si necesitas esta funcionalidad adicional.
El Futuro de Astro
Usar enlaces para navegar es un comportamiento fundamental de la web. Creemos que este es uno de los avances más significativos que han surgido de Chromium y del proceso de especificaciones del navegador en la memoria reciente. Estamos emocionados de continuar asociándonos con Google Chrome y otros proveedores de navegadores mientras implementan esta nueva API.
Los desarrolladores pueden aprovechar las view transitions nativas hoy o esperar a que se implemente para más usuarios. Cuando estés listo para habilitar (o migrar) es esencialmente un cambio de una línea de CSS para hacerlo.
Para empezar, puedes aprender más sobre Astro View Transitions. Estaremos actualizando nuestra documentación durante las próximas semanas para incluir el uso de estas nuevas APIs nativas del navegador.