Hoy, nos gustaría 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ó y experimentó con la API desde el principio, destacando las posibilidades para la comunidad en general. También nos complace compartir más información sobre la nueva compatibilidad integrada con transiciones de vistas en Astro 3.0.
Segundo plano
Las transiciones fluidas entre los diferentes estados de una página, conocidas como transiciones de estado, siempre han sido un aspecto complejo de la compilación de experiencias animadas y fluidas en la Web. A pesar de la disponibilidad de herramientas como las transiciones y las animaciones de CSS, y la API de Web Animation, crear transiciones de estado sigue siendo una tarea abrumadora. Uno de los desafíos es controlar la interacción en los elementos salientes, lo que puede hacer que las transiciones sean más complejas.
Además, es difícil mantener la posición de lectura y el enfoque de los dispositivos de accesibilidad. Además, lidiar con las diferencias de posición 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 a estos desafíos. Esta nueva API proporciona una forma 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 para la compatibilidad con transiciones en todos los sitios web, no solo en las aplicaciones web basadas en JavaScript. También tenemos previstas mejoras futuras. Es posible que Chrome explore incorporaciones interesantes, como transiciones entre documentos, animaciones impulsadas por el compositor, transiciones centradas y grupos de transiciones anidadas en el futuro.
Demostración de visita: En vivo, Fuente
Exploraciones iniciales con transiciones de vista
El recorrido de Chrome con la API de View Transitions no fue solitario. Los comentarios y la colaboración de los desarrolladores, los autores del framework y el grupo de trabajo de CSS desempeñaron un papel fundamental en la definición de la función a lo largo de varios años.
La experimentación de los desarrolladores desempeñó un papel fundamental desde el principio. Las primeras versiones de la API no admitían animaciones de CSS, y las transiciones se limitaban a unos pocos parámetros de configuración predeterminados restrictivos. Los primeros comentarios dejaron en claro que los desarrolladores querían que las transiciones fueran totalmente personalizables y expresivas. Esta colaboración constante garantizó que la API se diseñara con un equilibrio de buenos valores predeterminados, extensibilidad y personalización.
Astro fue uno de esos frameworks que se inclinó por las transiciones de vistas desde el principio. El resto de este artículo se presenta desde el punto de vista del equipo de Astro y comparte su experiencia para encontrar, adoptar y llevar las transiciones de vistas al frente de la experiencia de desarrollo web.
Por qué Astro apostó por las transiciones de vistas
Astro había estado buscando algo como View Transitions durante mucho tiempo. Astro es un framework web de JavaScript que renderiza los componentes de la IU en HTML ligero para obtener un rendimiento de carga de página más rápido. Astro mueve intencionalmente la mayor cantidad posible de trabajo del dispositivo cliente. Los sitios web de Astro usan la navegación de páginas nativa del navegador, en la que otros frameworks web pueden usurpar la navegación del navegador con 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 página y proporcionar persistencia de la IU similar a la de la app en todas las páginas sin adoptar el enrutamiento del cliente?
La respuesta fue View Transitions. Con las transiciones de vista, Astro podría proporcionar las mismas funciones de enrutamiento que ofrecían los frameworks web de SPA con mucho JavaScript, pero sin la sobrecarga de rendimiento y complejidad del enrutamiento del cliente. Otros frameworks abordaron las transiciones de vistas como un detalle de implementación opcional, pero para Astro fue algo mucho más grande.
La siguiente pregunta que el equipo de Astro tuvo que responder fue “¿cómo?”. El equipo buscó inspiración en proyectos como Turbo, Swup y Livewire, y hasta creó prototipos de algunos enfoques similares dentro de Astro.
Uno de los primeros intentos consistió en 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 con JavaScript. Era inteligente, pero propenso a errores.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Por suerte, la comunidad de Astro demostró que la API de View Transitions ya era potente sin que el producto complicara demasiado las cosas. Después de ver algunas demostraciones iniciales, el equipo de Astro se convenció de la idea de una API de Astro simple que pudiera coincidir con las APIs del navegador lo más cerca posible. En lugar de ver las transiciones de vistas como un detalle de implementación invisible oculto dentro de Astro, se pueden exponer directamente al desarrollador. 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ó sencillo: llevar la nueva API de View Transitions a Astro y proporcionar resguardos automáticos que se implementarían en la mayor cantidad posible de sitios web y navegadores. La compatibilidad con el resguardo es esencial, ya que la mayoría de los navegadores (fuera de Chrome) aún no admiten por completo las transiciones de vistas nativas.
Lanzamiento de la 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 enviaron todo a producción.
Demostración de visita: En vivo, Fuente
Astro 3.0 finaliza la compatibilidad y quita la marca de la nueva API de View Transitions para todos. Estas nuevas APIs ya están listas para que las adoptes de forma experimental o todas a la 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 funciones nuevas sobre la API nativa de View Transitions. Por ejemplo, la nueva directiva transition:persist de Astro permite que cualquier elemento se conserve en una navegación de página completa. Esto potencia elementos de larga duración, como reproductores de audio y video persistentes, algo que antes solo era posible en SPA de JavaScript pesados.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Demostración de visita: En vivo, Fuente
Astro también es libre de hacer que las transiciones de View sean más ergonómicas para el desarrollador. Por ejemplo, el equipo ya agregó compatibilidad con animaciones personalizadas hacia adelante y hacia atrás, y animaciones para HTML dinámico. Ambas funciones son difíciles de realizar solo con las APIs de nivel inferior, pero en Astro son prácticamente sin esfuerzo.
Por el momento, estas funciones solo están disponibles en Astro, pero el equipo de Astro espera que su experiencia se transmita a los autores de las especificaciones y a los grupos de trabajo para posibles mejoras del navegador en el futuro. Por ejemplo, supervisando de cerca una propuesta para facilitar el uso compartido de animaciones en CSS.
¿Qué viene después?
El futuro de las transiciones de vistas en la Web es prometedor. Astro, Nuxt y HTMX enviaron cierto grado de compatibilidad, y muchos otros expresaron interés.
El equipo de Chrome está encantado con la compatibilidad nativa de Astro con las transiciones de vistas. Es un gran paso para el desarrollo web, ya que permite experiencias del usuario más fluidas y dinámicas. Desarrolladores, les recomendamos 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 son un cambio radical. Las transiciones de vistas ayudaron a cerrar la brecha entre lo que era posible con las SPA y las MPA. Nos encantaría saber si hay más carencias en la compatibilidad con SPA o MPA. No dudes en comentar en el repositorio de GitHub de View Transitions WICG para analizar este tema en más detalle.
Ya nos inspiramos en las demostraciones y aplicaciones innovadoras que vimos, y esperamos 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 sigamos este recorrido juntos.