Hoy, queremos compartir más información sobre el recorrido de Chrome y Astro con la API de View Transitions. Esto incluye cómo la comunidad de Astro adoptó la API y la experimentó desde el principio, lo que resaltó las posibilidades para la comunidad más amplia. También nos emociona compartir más información sobre la nueva compatibilidad integrada con las transiciones de vistas en Astro 3.0.
Información general
Las transiciones fluidas entre los diferentes estados de una página, conocidas como transiciones de estado,, siempre han sido un aspecto complejo de la creación de experiencias animadas fluidas en la Web. A pesar de la disponibilidad de herramientas como las transiciones de CSS, las animaciones de CSS y la API de Web Animation, la creación de transiciones de estado sigue siendo una tarea abrumadora. Uno de los desafíos es manejar la interacción con los elementos salientes, lo que puede hacer que las transiciones sean más complejas.
Además, es difícil mantener la posición y el enfoque de lectura para los dispositivos de asistencia. Además, lidiar con las diferencias en las posiciones de desplazamiento hace que las transiciones de estado sean un proceso engorroso. Todos estos factores contribuyen a la complejidad de implementar transiciones fluidas entre varios elementos de una página web
La API de View Transitions surgió como la solución del navegador para estos desafíos. Esta nueva API proporciona una manera más fácil de cambiar el DOM en un solo paso mientras se crea una transición animada entre dos estados.
El lanzamiento de la API de View Transitions en Chrome 111 marcó el comienzo de una visión más amplia de compatibilidad con transiciones para todos los sitios web, no solo para las aplicaciones web basadas en JavaScript. También habrá mejoras en el futuro. Chrome podría explorar nuevas incorporaciones interesantes, como transiciones entre documentos, animaciones con compositor, transiciones con alcance y grupos de transición anidados en el futuro.
Ver demostración: En vivo, Fuente
Exploraciones iniciales con transiciones de vistas
El proceso de Chrome con la API de View Transitions no fue solitario. Los comentarios y la colaboración de los desarrolladores, los autores de marcos de trabajo y el Grupo de trabajo de CSS cumplieron un rol crucial en el diseño de la función a lo largo de varios años.
La experimentación con desarrolladores tuvo un papel fundamental desde el principio. Las primeras versiones de la API no admitían animaciones de CSS, y las transiciones estaban restringidas a algunos ajustes predeterminados restrictivos. Los primeros comentarios dejaron en claro que los desarrolladores querían que las transiciones fueran completamente personalizables y expresivas. Esta colaboración continua garantizó que la API se diseñara con un equilibrio entre buenos valores predeterminados, extensibilidad y personalización.
Astro fue uno de esos frameworks que comenzaron a usar las transiciones de vistas. El resto de este artículo es desde el punto de vista del equipo de Astro y comparte su experiencia en encontrar, adoptar y poner las transiciones de vistas en primer plano en la experiencia de desarrollo web.
Por qué apostar astronómicos en las transiciones de vistas
Durante mucho tiempo, Astro buscaba algo como las transiciones de vistas. Astro es un framework web de JavaScript que el servidor procesa los componentes de la IU en HTML básico para lograr un rendimiento de carga de la página más rápido. Astro quita intencionalmente la mayor cantidad de trabajo posible del dispositivo cliente. Los sitios web de Astro utilizan la navegación nativa de páginas del navegador, donde otros frameworks web podrían apropiarse de la navegación del navegador con el enrutamiento del cliente de JavaScript.
Esta compensación creó un desafío para el equipo de Astro: ¿Cómo podría Astro animar las transiciones de las páginas y proporcionar una persistencia de la IU similar a la de una app en todas las páginas sin adoptar el enrutamiento del cliente?
Las transiciones de vistas fueron la respuesta. Con las transiciones de vistas, Astro podría proporcionar las mismas funciones de enrutamiento que ofrecían los frameworks web SPA con mucho JavaScript, pero sin la sobrecarga de rendimiento y complejidad del enrutamiento del lado del cliente. Otros frameworks abordaron las transiciones de vista como un detalle de implementación opcional, pero para Astro era algo mucho más grande.
La siguiente pregunta que tuvo que responder el equipo de Astro fue: “¿Cómo?”. El equipo recurrió a proyectos como Turbo, Swup y Livewire para inspirarse e incluso creó un prototipo de algunos enfoques similares dentro de Astro.
Uno de los primeros intentos involucró una "transición inteligente" de página completa que comparaba automáticamente cada página nueva de HTML con el HTML actual y, luego, intentaba reemplazar todos los elementos a la vez mediante JavaScript. Fue inteligente, pero propensa a errores.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Afortunadamente, la comunidad de Astro mostró que la API de View Transitions ya era potente sin que el producto complicar demasiado las cosas. Después de ver algunas de las primeras demostraciones, el equipo de Astro se convenció de la idea de una Astro API simple que pudiera coincidir con las API del navegador de la manera más precisa posible. En lugar de ver las transiciones de vistas como un detalle de implementación invisible escondido en Astro, se podrían exponer directamente al desarrollador. Se alinea Astro directamente con la plataforma web y reduce la complejidad general en el frontend.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
El trabajo se volvió simple: incorporar la nueva API de View Transitions en Astro y brindar resguardos automáticos para llevar a la mayor cantidad posible de sitios web y navegadores. La compatibilidad de resguardo es fundamental, ya que la mayoría de los navegadores (fuera de Chrome) aún no incluyen compatibilidad completa para las transiciones de vistas nativas.
Lanzamiento de asistencia oficial en Astro
Astro lanzó la compatibilidad experimental con transiciones de vistas en Astro 2.9. La respuesta fue positiva de inmediato. Los desarrolladores comenzaron a compartir demostraciones increíbles de muchos casos de uso diferentes y, en algunos casos, incluso llevarlos a producción.
Ver demostración: En vivo, Fuente
Astro 3.0 finaliza la compatibilidad y desmarca la nueva API de View Transitions para todos. Estas nuevas APIs ya están listas para que las adoptes de forma experimental o de una sola vez.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
Un beneficio inesperado de alinear Astro con las APIs de la plataforma es la capacidad de experimentar con la compilación de nuevas funciones sobre la API nativa de View Transitions. Por ejemplo, la nueva directiva Astro transition:persist permite que cualquier elemento persista en una navegación de página completa. Esta tecnología impulsa elementos de larga duración, como los reproductores persistentes de audio y video, algo que antes solo era posible en las SPA de JavaScript pesadas.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Ver demostración: En vivo, Fuente
Astro también es gratuito para que las transiciones de vistas sean más ergonómicas para el desarrollador. Por ejemplo, el equipo ya agregó compatibilidad con animaciones personalizadas hacia adelante y atrás, y animaciones para HTML dinámico. Es difícil lograr ambas funciones por sí solas con las APIs de nivel inferior, pero en Astro son prácticamente sencillas.
Por el momento, estas funciones solo están disponibles en Astro, pero el equipo de Astro espera proporcionar su experiencia a los autores de especificaciones y a los grupos de trabajo para obtener posibles mejoras en el navegador más adelante. Por ejemplo, puedes supervisar atentamente una propuesta para que sea más fácil compartir animaciones en CSS.
¿Cuál es el siguiente paso?
El futuro de las transiciones de vistas en la Web es brillante. Astro, Nuxt y HTMX implementaron cierto grado de asistencia, y muchos otros expresaron interés.
El equipo de Chrome está entusiasmado con la compatibilidad nativa con las transiciones de vistas de Astro. Es un gran paso para el desarrollo web, ya que permite experiencias del usuario más fluidas y dinámicas. Si eres desarrollador, te animamos a que exploren las transiciones de vistas en Astro 3.0. Ya sea que crees páginas de destino nuevas o actualices sitios existentes, estas mejoras serán un punto de inflexión. Las transiciones de vistas permitieron cerrar la brecha entre lo que era posible con las SPA y las MPA. En Chrome, nos gustaría saber si hay brechas adicionales en la compatibilidad con SPA o MPA. No dudes en comentar el repositorio de GitHub de View Transitions WICG para analizar esto con más detalle.
Ya estamos inspirados en las demostraciones y aplicaciones innovadoras que hemos visto, y estamos ansiosos por ver más. Tu trabajo con las transiciones de vistas está dando forma al futuro de la Web. Prueba las transiciones de vistas en Astro, comparte tu trabajo y continuemos este viaje juntos.