Aujourd'hui, nous souhaitons vous en dire plus sur le parcours de Chrome et d'Astro avec l'API View Transitions. Cela inclut la façon dont la communauté Astro a adopté et expérimenté l'API dès le début, en soulignant les possibilités qu'elle offre à la communauté plus large. Nous sommes également ravis de vous présenter la nouvelle prise en charge intégrée des transitions de vue dans Astro 3.0.
Contexte
Les transitions fluides entre les différents états d'une page, appelées transitions d'état, ont toujours été un aspect complexe de la création d'expériences animées fluides sur le Web. Malgré la disponibilité d'outils tels que les transitions CSS, les animations CSS et l'API Web Animation, la création de transitions d'état reste une tâche ardue. L'un des défis consiste à gérer les interactions sur les éléments sortants, ce qui peut rendre les transitions plus complexes.
De plus, il est difficile de maintenir la position de lecture et la mise au point pour les appareils d'assistance. De plus, gérer les différences de position de défilement rend les transitions d'état un processus fastidieux. Tous ces facteurs contribuent à la complexité de l'implémentation de transitions fluides entre les différents éléments d'une page Web.
L'API View Transitions est apparue comme la solution du navigateur à ces défis. Cette nouvelle API permet de modifier plus facilement le DOM en une seule étape tout en créant une transition animée entre deux états.
Le lancement de l'API View Transitions dans Chrome 111 a marqué le début d'une vision plus large de la prise en charge des transitions pour tous les sites Web, et pas seulement les applications Web basées sur JavaScript. D'autres améliorations sont également prévues. Chrome pourrait explorer des ajouts intéressants à l'avenir, comme des transitions entre des documents, des animations basées sur le moteur de composition, des transitions de portée et des groupes de transitions imbriqués.
Accéder à la démonstration: En direct, Source
Premières explorations avec les transitions de vue
Le parcours de Chrome avec l'API View Transitions n'a pas été solitaire. Les commentaires et la collaboration des développeurs, des auteurs de frameworks et du groupe de travail CSS ont tous joué un rôle crucial dans la conception de cette fonctionnalité au fil de plusieurs années.
Les tests des développeurs ont joué un rôle essentiel dès le départ. Les premières versions de l'API ne prenaient pas en charge les animations CSS, et les transitions étaient limitées à quelques préréglages restrictifs. Les premiers commentaires ont clairement indiqué que les développeurs souhaitaient que les transitions soient entièrement personnalisables et expressives. Cette collaboration a permis de concevoir l'API en veillant à un équilibre entre les valeurs par défaut, l'extensibilité et la personnalisation.
Astro était l'un des premiers frameworks à s'appuyer sur les transitions de vue. Le reste de cet article est présenté du point de vue de l'équipe Astro. Il partage son expérience de recherche, d'adoption et de mise en avant des transitions de vue dans l'expérience de développement Web.
Pourquoi Astro mise sur les transitions de vue
Astro cherchait depuis longtemps quelque chose comme les transitions de vue. Astro est un framework Web JavaScript qui génère du code HTML léger à partir de vos composants d'interface utilisateur pour accélérer le chargement des pages. Astro déplace intentionnellement autant de travail que possible de l'appareil client. Les sites Web Astro utilisent la navigation de page native du navigateur, tandis que d'autres frameworks Web peuvent détourner la navigation du navigateur avec le routage côté client JavaScript.
Ce compromis a posé un défi à l'équipe Astro: comment Astro pourrait-il animer les transitions de page et assurer la persistance de l'interface utilisateur semblable à une application sur les pages sans adopter le routage côté client ?
La réponse était "Afficher les transitions". Avec les transitions de vue, Astro pouvait fournir les mêmes fonctionnalités de routage que les frameworks Web SPA axés sur JavaScript, mais sans les coûts de performances et de complexité du routage côté client. D'autres frameworks considéraient les transitions de vue comme un détail d'implémentation facultatif, mais pour Astro, il s'agissait d'un élément beaucoup plus important.
La question suivante à laquelle l'équipe Astro a dû répondre était "comment ?". Elle s'est inspirée de projets tels que Turbo, Swup et Livewire, et a même prototypé quelques approches similaires dans Astro.
L'une des premières tentatives consistait en une "transition intelligente" sur toute la page, qui comparait automatiquement chaque nouvelle page HTML à la page HTML actuelle, puis essayait de remplacer tous les éléments en même temps à l'aide de JavaScript. C'était une solution intelligente, mais sujette aux erreurs.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
Heureusement, la communauté Astro a démontré que l'API View Transitions était déjà puissante sans que le produit ne complique les choses. Après avoir vu quelques premières démonstrations, l'équipe Astro a été convaincue par l'idée d'une API Astro simple qui pourrait correspondre le plus possible aux API du navigateur. Au lieu de considérer les transitions de vue comme un détail d'implémentation invisible caché dans Astro, elles peuvent être directement exposées au développeur. Alignement direct d'Astro avec la plate-forme Web et réduction de la complexité globale au niveau du 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>
<!-- ... -->
La tâche est devenue simple: intégrer la nouvelle API View Transitions à Astro et fournir des solutions de remplacement automatiques qui s'appliqueraient à autant de sites Web et de navigateurs que possible. La prise en charge du remplacement est essentielle, car la plupart des navigateurs (à l'exception de Chrome) ne sont pas encore entièrement compatibles avec les transitions de vue natives.
Lancement de l'assistance officielle dans Astro
Astro a publié une compatibilité expérimentale avec les transitions de vue dans Astro 2.9. La réponse a été positive immédiatement. Les développeurs ont commencé à partager des démonstrations incroyables de nombreux cas d'utilisation différents, et dans certains cas, à les déployer en production.
Accéder à la démonstration: En direct, Source
Astro 3.0 finalise la prise en charge et supprime l'icône de drapeau pour la nouvelle API View Transitions pour tous les utilisateurs. Vous pouvez désormais adopter ces nouvelles API de manière expérimentale ou en une seule fois.
<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>
L'alignement d'Astro sur les API de la plate-forme présente un avantage inattendu : vous pouvez tester la création de nouvelles fonctionnalités sur l'API native View Transitions. Par exemple, la nouvelle directive transition:persist d'Astro permet à n'importe quel élément de persister lors d'une navigation sur une page entière. Cela permet d'utiliser des éléments durables tels que des lecteurs audio et vidéo persistants, ce qui n'était auparavant possible que dans les SPA JavaScript lourdes.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Accéder à la démonstration: En direct, Source
Astro est également libre de rendre les transitions de vue plus ergonomiques pour le développeur. Par exemple, l'équipe a déjà ajouté la prise en charge des animations avant/arrière personnalisées et des animations pour le code HTML dynamique. Ces deux fonctionnalités sont difficiles à implémenter avec les API de bas niveau uniquement, mais dans Astro, elles sont pratiquement sans effort.
Pour le moment, ces fonctionnalités ne sont disponibles que dans Astro, mais l'équipe Astro espère pouvoir faire part de son expérience aux auteurs de la spécification et aux groupes de travail pour améliorer les navigateurs à l'avenir. Par exemple, en suivant de près une proposition pour faciliter le partage d'animations en CSS.
Quelle est la prochaine étape ?
L'avenir des transitions de vue sur le Web s'annonce radieux. Astro, Nuxt et HTMX ont tous fourni un certain niveau de prise en charge, et de nombreux autres ont exprimé leur intérêt.
L'équipe Chrome est ravie de la prise en charge native des transitions de vue d'Astro. Il s'agit d'une avancée majeure pour le développement Web, qui permet d'offrir des expériences utilisateur plus fluides et dynamiques. Développeurs, nous vous invitons à découvrir les transitions de vue dans Astro 3.0. Que vous créiez des pages de destination ou que vous migriez des sites existants, ces améliorations sont révolutionnaires. Les transitions de vue ont permis de combler l'écart entre ce qui était possible avec les SPA et les MPA. Chrome aimerait connaître votre avis sur les lacunes de compatibilité supplémentaires avec les SPA et/ou les MPA. N'hésitez pas à commenter le dépôt GitHub WICG sur les transitions de vue pour en savoir plus.
Nous sommes déjà inspirés par les démonstrations et applications innovantes que nous avons vues, et nous avons hâte d'en voir plus. Votre travail avec les transitions de vue façonne l'avenir du Web. Essayez les transitions de vue dans Astro, partagez votre travail et poursuivons ce voyage ensemble.