Voir les transitions dans Astro

Afficher la conversion dans Astro: un outil puissant pour la commutation de pages lisses

Cet article est extrait du livre de SitePoint Premium "Unleashing the Power of Astro", qui présente la fonction de conversion de la vue dans Astro.

L'API de transformation de vue fournit un moyen pratique de mettre à jour simultanément le contenu DOM en une seule opération et de générer des effets de conversion d'animation entre les états DOM individuels. La mise en œuvre de cela sur le Web dans le passé a été très difficile, mais avec cette nouvelle API, la transformation est devenue assez facile. La recherche montre que l'utilisation de l'API de conversion View peut accélérer les performances perçues d'un site Web.

Astro Native prend en charge la conversion de vue et dispose d'un mécanisme de secours intégré pour prendre en charge les navigateurs qui ne prennent pas actuellement en charge cette API.

Cette solution native prend en charge l'animation intégrée, les animations de navigation avant et arrière et le support d'accessibilité automatique (via prefers-reduced-motion) et de nombreuses autres fonctionnalités.

L'une des meilleures façons de la conversion de la vue de démonstration consiste à utiliser un élément vidéo qui maintiendra son état entre les conversions de pages. (Notez que nous pouvons également garder l'état entre les composants en utilisant la directive client:*). La vidéo ci-dessous montre un exemple.

Supposons que nous ayons un composant <video></video> qui contient les éléments suivants:

<code>---
// 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 transition:persist=""></video></code>

Dans le code ci-dessus, nous obtenons une vidéo de Cloudinary. De plus, nous permettons aux vidéos de lire et de boucler automatiquement après la lecture, et de fournir aux utilisateurs des boutons de contrôle. 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 à l'élément HTML <video></video>.

Veuillez noter la commande transition:persist. Avec cette commande, nous garderons le lecteur vidéo entre les transitions: lors de la navigation vers la page suivante, la vidéo continuera à jouer, tandis que le reste de la page affichera le contenu mis à jour. Nous pouvons utiliser ce composant sur les pages index.astro et about.astro:

<code>// src/pages/index.astro
---
import Video from '../components/Video.astro';
---

<video></video></code>

Enfin, nous devons activer la conversion de page, que nous pouvons activer pour chaque page ou mondialement pour l'ensemble du projet. En supposant que nous ayons une sorte de fichier de mise en page, nous pouvons facilement l'activer en importation astro:transitions depuis: ViewTransitions

<code>// src/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---



    <title>My site!</title>


    <viewtransitions></viewtransitions>
    <slot></slot>

</code>

En résumé, l'API de conversion de vue expérimentale simplifie la conversion visuelle entre différentes pages ou éléments à travers des instantanés de pseudo-éléments CSS, JavaScript et états DOM avant et arrière. Il offre une nouvelle occasion d'améliorer les performances consacrées à la page et de minimiser les dépendances sur JavaScript personnalisé complexe et CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!