Aujourd'hui, nous souhaitons vous en dire plus sur le parcours de Chrome et d'Astro avec l'API View Transitions. Par exemple, la communauté Astro a adopté et expérimenté l'API très tôt, ce qui a permis de mettre en évidence les possibilités qu'elle offre à la communauté dans son ensemble. Nous sommes également ravis de vous donner plus d'informations sur 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 fluides et animées 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 l'interaction 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, la gestion des différences de position de défilement rend le processus des transitions d'état fastidieux. Tous ces facteurs contribuent à la complexité de l'implémentation de transitions fluides entre différents éléments d'une page Web.
L'API View Transitions est apparue comme la solution du navigateur à ces problèmes. 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 de la transition pour tous les sites Web, et pas seulement pour les applications Web basées sur JavaScript. D'autres améliorations seront bientôt disponibles. À l'avenir, Chrome pourrait explorer des ajouts intéressants, tels que des transitions entre les documents, des animations gérées par le compositeur, des transitions délimitées et des groupes de transition imbriqués.
Accéder à la démonstration: En direct, Source
Premières explorations avec transitions de vue
L'utilisation de l'API View Transitions par Chrome ne s'est pas faite en solo. 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 cours de plusieurs années.
L'expérimentation chez les développeurs a joué un rôle crucial dès le début. Les premières versions de l'API n'étaient pas compatibles avec les animations CSS, et les transitions étaient limitées à quelques préréglages restrictifs. Les premiers commentaires ont montré clairement que les développeurs voulaient que les transitions soient entièrement personnalisables et expressives. Ce va-et-vient coordonné a permis de s'assurer que l'API était conçue avec un juste équilibre entre de bonnes valeurs par défaut, l'extensibilité et la personnalisation.
Astro est l'un de ces outils qui a adopté les transitions de vues très tôt. Le reste de cet article a été rédigé du point de vue de l'équipe Astro, et décrit son expérience en matière de recherche, d'adoption et d'intégration des transitions de vues au centre de l'expérience de développement Web.
Pourquoi Astro parie sur les transitions de vue
Astro recherchait un outil du type "Afficher les transitions" depuis longtemps. Astro est un framework Web JavaScript qui affiche vos composants d'interface utilisateur en HTML léger pour un chargement plus rapide des pages. Astro déplace intentionnellement autant de travail que possible de l'appareil client. Les sites Web astro utilisent la navigation native sur les pages de navigateur, alors que d'autres frameworks Web peuvent pirater la navigation du navigateur avec le routage côté client JavaScript.
Ce compromis a créé un défi pour l'équipe Astro: comment Astro pourrait-il animer les transitions entre les pages et assurer la persistance de l'interface utilisateur d'une page à l'autre sans adopter le routage côté client ?
Les transitions de vue étaient la solution. Avec les transitions d'affichage, Astro a pu fournir les mêmes fonctionnalités de routage que les frameworks Web SPA utilisant JavaScript, sans les coûts de performances et de complexité liés au routage côté client. D'autres structures abordaient les transitions d'affichage comme un détail d'implémentation facultatif, mais pour Astro, elle était bien plus complexe.
La question suivante à laquelle l'équipe Astro devait répondre était la suivante : "Comment ?". Elle s'est inspirée de projets tels que Turbo, Swup et Livewire, et a même prototypé quelques approches similaires en son sein.
L'une des premières tentatives consistait à effectuer une "transition intelligente" pleine page qui comparait automatiquement chaque nouvelle page HTML au code HTML actuel, puis tentait de remplacer tous les éléments en une seule fois à l'aide de JavaScript. C'était intelligent, mais source d'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 montré que l'API View Transitions était déjà performante sans que le produit ne complique les choses. Après avoir vu les premières démonstrations, l'équipe Astro a été convaincue de l'idée d'une API Astro simple qui pourrait correspondre le plus possible aux API des navigateurs. Au lieu de voir les transitions de vue comme un détail d'implémentation invisible caché dans Astro, elles pourraient être directement exposées au développeur. Alignement d'Astro directement sur la plate-forme Web et réduction de la complexité globale de l'interface.
---
// 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>
<!-- ... -->
Le travail a été simplifié: intégrer la nouvelle API View Transitions dans Astro et proposer des solutions de remplacement automatiques disponibles pour un maximum de sites Web et de navigateurs. La compatibilité des créations de remplacement est essentielle, car la plupart des navigateurs (en dehors de Chrome) ne sont pas encore totalement compatibles avec les transitions d'affichage natives.
Lancement du support officiel dans Astro
Astro a publié la prise en charge expérimentale des transitions de vue dans Astro 2.9. La réponse a été immédiatement positive. Les développeurs ont commencé à partager des démos incroyables sur un grand nombre de cas d'utilisation, et même à les envoyer en production dans certains cas.
Accéder à la démonstration: En direct, Source
Astro 3.0 finalise la prise en charge de la nouvelle API View Transitions et supprime le drapeau pour tous les utilisateurs. Vous pouvez dès à présent adopter ces nouvelles API de façon expérimentale ou de façon groupée.
<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'harmonisation d'Astro avec les API de la plate-forme présente un avantage inattendu : elle permet de tester la création de nouvelles fonctionnalités en plus de l'API native View Transitions. Par exemple, la nouvelle directive Astro transition:persist permet à n'importe quel élément de persister sur une page entière de navigation. Cela permet d'alimenter des éléments de longue durée tels que des lecteurs audio et vidéo persistants, ce qui n'était auparavant possible que dans les applications monopages 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 sans frais pour 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 HTML dynamiques. Ces deux fonctionnalités sont difficiles à réaliser avec les API de niveau inférieur, mais dans Astro, elles sont pratiquement faciles à utiliser.
Ces fonctionnalités ne sont disponibles que dans Astro pour le moment, mais l'équipe espère faire part de son expérience aux auteurs des spécifications et aux groupes de travail pour qu'elles puissent être améliorées par la suite. Par exemple, vous pouvez surveiller de près une proposition afin de faciliter le partage d'animations en CSS.
Quelle est la prochaine étape ?
L'avenir des transitions de vues sur le Web s'annonce radieux. Astro, Nuxt et HTMX ont tous déjà obtenu un certain niveau d'assistance, et de nombreux autres ont exprimé leur intérêt.
L'équipe Chrome est ravie de la compatibilité native d'Astro avec les transitions de vue. Il s'agit d'une étape 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. Qu'il s'agisse de créer de nouvelles pages de destination ou de mettre à jour des sites existants, ces améliorations ont changé la donne. Les transitions de vues nous ont permis de combler le fossé qui était possible avec les applications monopages et les applications multiservices. Nous serions ravis de connaître votre avis sur l'existence d'autres lacunes dans la prise en charge de l'application monopage et/ou de l'approbation multipartite. Pour en savoir plus, n'hésitez pas à ajouter des commentaires sur le dépôt GitHub de WICG sur les transitions d'affichage.
Les démonstrations et applications innovantes nous ont déjà inspirés, et nous avons hâte d'en voir plus. Votre travail avec les transitions de vues façonne l'avenir du Web. Essayez les transitions d'affichage dans Astro, partagez votre travail et poursuivons l'aventure ensemble.