L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Afficher les transitions dans Astro —
Cette introduction pour visualiser les transitions dans Astro est exclue de Libérer la puissance d’Astrodisponible dès maintenant sur SitePoint Premium.
Le Afficher l’API des transitions offre un moyen pratique de générer des transitions animées entre différents états du DOM tout en mettant simultanément à jour le contenu du DOM en une seule opération. Réaliser cela a toujours été difficile sur le Web, mais avec cette nouvelle API, les transitions peuvent être gérées de manière assez simple. Études ont montré que l’utilisation de l’API View Transitions conduit à une perception plus rapide des performances du site.
Astro prend en charge les transitions d’affichage dès le départ, avec un mécanisme de secours intégré pour les navigateurs qui ne prennent actuellement pas en charge l’API.
La solution prête à l’emploi prend en charge les animations intégrées, les animations pour la navigation avant et arrière, ainsi que la prise en charge automatique de l’accessibilité (via prefers-reduced-motion), entre autres.
L’un des meilleurs moyens de démontrer les transitions de vue consiste à utiliser un élément vidéo qui conservera son état entre les transitions de page. (Notez que nous pouvons également conserver l’état entre les composants qui utilisent le client:* directives également.) Un exemple de ceci est montré dans la vidéo ci-dessous.
Supposons que nous ayons un <Video /> composant avec ce contenu :
---
// src/components/Video
const src="https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4";
const {
autoplay = false,
controls = true,
loop = false
} = Astro.props;
---
<video {controls} {autoplay} {loop} transition:persist>
<source {src} />
</video>
Dans le code ci-dessus, nous récupérons une vidéo de Cloudinary. De plus, nous permettons à la vidéo de se lire et de se mettre en boucle automatiquement (recommencer) une fois terminée, et nous fournissons des boutons de contrôle à l’utilisateur. Ces paramètres sont déterminés par les propriétés envoyées à ce composant vidéo, et si ces propriétés ne sont pas fournies, les valeurs par défaut sont utilisées. Ces variables sont ensuite ajoutées au HTML <video> et <source> éléments.
Veuillez prendre note du transition:persist directif. Avec cette directive, nous maintiendrons l’état du lecteur vidéo entre les transitions : lors de la navigation vers la page suivante, la vidéo continuera à jouer, tandis que d’autres parties de la page afficheront le contenu mis à jour. Nous pouvons utiliser ce composant à la fois sur index.astro et about.astro pages :
// src/pages/index.astro
---
import Video from '../components/Video.astro';
---
<!-- some other HTML -->
<Video />
Enfin, nous devons activer les transitions de page, que nous pouvons effectuer soit par page, soit globalement pour l’ensemble du projet. En supposant que nous disposions d’un fichier de mise en page, nous pouvons facilement l’activer, en important ViewTransitions depuis astro:transitions:
// src/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
<title>My site!</title>
<ViewTransitions />
</head>
<body>
<slot />
</body>
</html>
En résumé, l’API expérimentale View Transitions simplifie les transitions visuelles entre diverses pages ou éléments via des pseudo-éléments CSS, JavaScript et des instantanés des états DOM précédents et actuels. Il présente une nouvelle opportunité d’améliorer les performances perçues d’une page, en minimisant le recours à des JavaScript et CSS personnalisés complexes.
Vous voulez en savoir plus sur Astro, le framework tout-en-un moderne permettant de créer des sites Web plus rapides et axés sur le contenu ? Vérifier Libérer la puissance d’Astrodisponible dès maintenant sur SitePoint Premium.
Source link