Astro et les view transitions

Publié le 27 septembre 2023 Astro

Introduction

L’industrie du développement web évolue rapidement, et de nouvelles technologies et approches émergent constamment pour améliorer l’expérience utilisateur. L’une de ces avancées majeures est l’utilisation d’Astro.js, un framework web moderne qui offre des performances exceptionnelles et des fonctionnalités de pointe. Dans cet article, nous allons explorer comment Astro.js peut être utilisé en combinaison avec les View Transitions pour créer des sites web plus dynamiques et engageants.

Comprendre Astro.js

Astro.js est un framework web qui se démarque par sa philosophie de construction de sites web. Contrairement à de nombreux autres frameworks, Astro.js adopte une approche de rendu hybride, ce qui signifie que le code JavaScript n’est exécuté que lorsque c’est nécessaire, permettant ainsi de réduire considérablement la taille du bundle JavaScript. Cela se traduit par des temps de chargement plus rapides et une meilleure expérience utilisateur.

Astro.js fonctionne en créant des “composants” qui sont des éléments autonomes de l’interface utilisateur. Ces composants peuvent être chargés de manière asynchrone, ce qui signifie que seuls les composants nécessaires pour une page particulière sont chargés, ce qui contribue à accélérer le chargement de la page. Cette approche modulaire permet également une meilleure gestion du code et une plus grande réutilisation des composants.

Avantages des View Transitions

L’une des fonctionnalités les plus attrayantes d’Astro.js est son support intégré pour les View Transitions. Les View Transitions permettent d’ajouter des animations fluides et des effets de transition entre les pages de votre site web. Cela peut rendre la navigation sur votre site plus agréable et immersive pour les utilisateurs.

Amélioration de l’expérience utilisateur : Les transitions fluides entre les pages donnent l’impression que le site web est plus réactif et interactif, ce qui peut garder les utilisateurs engagés et réduire le taux de rebond.

Meilleure hiérarchisation du contenu : Les transitions peuvent aider à guider l’attention de l’utilisateur vers les éléments clés de la page suivante, améliorant ainsi la compréhension et la navigation.

Esthétique améliorée : Les transitions bien conçues ajoutent une touche d’esthétique à votre site web, ce qui peut renforcer la perception de la marque et le rendre plus attrayant.

Mise en place

Pour commencer il est nécessaire d’utiliser le nouveau composant ViewTransitions fourni par Astro, dans la section head de votre site.

---
import { ViewTransitions } from 'astro:transitions'; 
---

<html lang="en">
  <head>
    <title>My Homepage</title>
    <ViewTransitions />
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

A partir du moment ou vous utilisé ce composant, une animation par défaut sera exécutée entre la navigation des pages (fadeIn par défaut). Toutefois, l’animation sera visible sur les navigateurs qui supportent la nouvel api view transition : Lien Can I Use.

Si le navigateur ne supporte pas l’api view transition, Astro va par défaut tenter d’émuler l’animation. Il est toutefois possible d’avoir des comportements étranges, si tel est le cas il est possible de définir un fallback pour que l’animation ne se déclenche pas sur les navigateurs non compliant :

---
import { ViewTransitions } from 'astro:transitions';
---
<title>My site</title>

<ViewTransitions fallback="none">

Il est aussi possible d’animer des images d’une page à une autre. Admettons que sur la page d’accueil vous avez une image, et que sur la page d’un article cette même image est reprise; en utilisant la directive transition:animate, Astro va automatiquement animer votre image avec une animation hero.

// index.astro
<section>
  <img src="/images/astro.png" transition:name="hero">
</section>

// detail.astro
<section>
  <img src="/images/astro.png" transition:name="hero">
</section>

Conclusion

L’intégration d’Astro.js et des View Transitions dans votre projet web peut apporter une amélioration significative de l’expérience utilisateur.