Une introduction à l'API des transitions de vue

Voir les transitions API: technologies innovantes pour simplifier l'animation Web

Afficher les transitions L'API fournit un moyen plus facile de réaliser l'animation entre les éléments de la page Web, permettant des transitions en douceur même entre les charges de page. Il s'agit d'une technologie d'amélioration progressive avec une bonne compatibilité.

La transition et l'animation CSS traditionnelles ont réalisé des réalisations remarquables dans les effets Web, mais toutes les animations ne sont pas faciles à mettre en œuvre. Par exemple, l'animation croisée d'une liste de dix images et titres nécessite les étapes suivantes:

1. Gardez l'ancien élément DOM;
2. Créez un nouvel élément DOM et ajoutez-le à l'emplacement approprié de la page;
Traite les anciens éléments tout en s'évanouissant dans de nouveaux éléments;
3. (Facultatif) Remplacez l'ancien élément par le nouvel élément DOM.
L'API de transitions de vue simplifie ce processus:

API capture des instantanés de l'état actuel de la page;

Mettez à jour les éléments DOM, ajouter ou supprimer les éléments nécessaires;
1. API capture des instantanés du nouveau statut de page; L'API
utilise l'effet de fondu par défaut ou l'animation CSS personnalisée pour animer les transitions entre deux états.
3. Nous avons juste besoin de mettre à jour le DOM sans les étapes supplémentaires compliquées. Avec seulement quelques lignes de code, vous pouvez réaliser des animations de type diapositives dans des navigateurs qui prennent en charge l'API de transitions de vue.

Actuellement, l'API est à l'étape expérimentale, mais le dernier navigateur basé sur le chrome prend déjà en charge les effets d'animation DOM d'une seule page. Chrome 115 et plus tard prend également en charge les animations entre les charges de page, comme sur les sites WordPress typiques. Cela facilite l'utilisation sans code JavaScript.

Il convient de noter que Mozilla et Apple n'ont pas annoncé leurs plans pour mettre en œuvre l'API dans Firefox et Safari. Les navigateurs qui ne prennent pas en charge l'API de transitions de vue fonctionnent toujours correctement, il est donc sûr d'ajouter cet effet maintenant.

Comparaison entre les technologies nouvelles et anciennes

Les développeurs seniors peuvent se sentir familiers. Internet Explorer 4.0, publié en 1997, a introduit des capacités de transition élément et pleine page et a été mis à jour dans IE5.5, publié en 2000. Nous pouvons utiliser la balise

pour ajouter divers effets de transition dans le style PowerPoint:

Cependant, cette technologie n'a pas été largement adoptée car ce n'est pas une norme Web.

<meta>

Créer des effets de transition dans la page

<code class="language-html"><meta content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')" http-equiv="Page-Enter">
<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')" http-equiv="Page-Exit"></code>

L'exemple suivant montre comment créer un effet de fondu simple en utilisant l'API de transitions de vue dans Chrome:

(La liaison et la capture d'écran de Codepen Exemple 1 doivent être intégrées ici)

Le code HTML contient deux éléments

, qui sont utilisés pour afficher différents blocs de contenu:

(Les extraits de code HTML doivent être intégrés ici)

La fonction

switchArticle() gère toutes les mises à jour DOM, affichant ou cachant chaque élément hidden> en ajoutant ou en supprimant l'attribut <article></article>. Lorsque la page se charge, déterminez l'élément actif location.hash en fonction de l'élément <article></article> ou du premier <article></article> de l'URL de la page:

(Les extraits de code JavaScript doivent être intégrés ici)

La fonction du gestionnaire d'événements surveille tous les clics et appels de la page #hash lorsque l'utilisateur clique sur un lien avec switchArticle():

(Les extraits de code JavaScript doivent être intégrés ici)

En passant la fonction switchArticle() comme un rappel à document.startViewTransition(), nous pouvons utiliser l'API View Transitions:

(Les extraits de code JavaScript doivent être intégrés ici)

document.startViewTransition() Capturera un instantané de l'état initial, exécutera switchArticle(), capturera un instantané du nouvel état et créera un effet de fondu d'une demi-seconde par défaut entre les deux.

Les sélecteurs CSS ::view-transition-old(root) et ::view-transition-new(root) peuvent être utilisés pour définir respectivement les anciens et nouveaux états:

(Les extraits de code CSS doivent être intégrés ici)

(Contenu de l'étude, y compris des animations plus complexes, des mises à jour ASynchrones DOM, l'utilisation de l'API des animations Web, les transitions de navigation multipage, les désactifs d'animation, le résumé et les FAQ, tous doivent être réécrits d'une manière similaire et le code dans le Le texte d'origine intégré l'image dans la position correspondante et la décrive dans un langage plus concis et clair.

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!