Une introduction à l’API View Transitions –

La nouvelle API View Transitions offre un moyen plus simple d’animer entre deux états DOM, même entre les chargements de page. C’est une amélioration progressive qui fonctionne aujourd’hui.

Les transitions et les animations CSS ont révolutionné les effets Web au cours de la dernière décennie, mais tout n’est pas facile. Considérez une liste d’éléments – tels que dix images avec des titres – que nous voulons transformer en une nouvelle liste d’éléments à l’aide d’un fondu enchaîné. L’approche actuelle :

1. conserver les anciens éléments DOM
2. construire les nouveaux éléments DOM, les ajouter à la page, en s’assurant qu’ils sont dans un emplacement approprié
3. fondu enchaîné à l’ancien set tout en fondu enchaîné au nouveau set, puis
4. (facultatif) remplacer les anciens éléments DOM par les nouveaux

Il n’a pas été possible de simplement mettre à jour le DOM — jusqu’ici! Le API Afficher les transitions utilise le processus suivant :

1. L’API prend un instantané de l’état actuel de la page.
2. Nous mettons à jour le DOM en ajoutant ou en supprimant des éléments si nécessaire.
3. L’API prend un instantané du nouvel état de la page.
4. L’API s’anime entre les deux états, en utilisant un fondu par défaut ou les animations CSS que nous définissons.

Nous avons seulement besoin de mettre à jour le DOM comme nous le faisons déjà. Quelques lignes de code supplémentaires peuvent progressivement améliorer la page lorsque l’API View Transitions est disponible pour créer des effets de type présentation.

L’API est expérimentale, mais les navigateurs récents basés sur Chromium prennent en charge les effets DOM sur la page et sur un seul document.

UN API viewTransition pour la navigation est également disponible dans Chrome 115+ et propose des animations entre les chargements de pages individuelles, comme sur les sites WordPress typiques. C’est encore plus facile à utiliser et ne nécessite pas de JavaScript.

Mozilla et Apple n’ont pas révélé leurs intentions d’implémenter l’API dans Firefox et Safari. Tout navigateur sans l’API View Transitions continuera à fonctionner, vous pouvez donc ajouter des effets en toute sécurité dès aujourd’hui.

Nouvelles techniques anciennes

Les développeurs d’un certain âge peuvent ressentir du déjà-vu. Microsoft a ajouté des transitions d’éléments et de pages entières dans Internet Explorer 4.0 (publié en 1997) avec d’autres mises à jour dans IE5.5 (publié en 2000). Nous pourrions ajouter des boîtes, des cercles, des volets, des fondus enchaînés, des stores, des diapositives, des bandes et des spirales inspirés de PowerPoint avec un <meta> étiqueter:

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

Étrangement, la technique n’a jamais été largement adoptée. Ce n’était pas une norme Web, mais le W3C en était à ses balbutiements – et les développeurs étaient heureux d’utiliser de nombreuses autres technologies spécifiques à IE !

Pourquoi a-t-il fallu un quart de siècle pour qu’une alternative apparaisse ?!

Création de transitions sur la page

Affichez l’exemple CodePen suivant dans Chrome et cliquez sur la navigation dans l’en-tête pour voir un fondu d’une seconde entre les deux états.

Voir le stylo
Exemple 1 d’API Transitions par SitePoint (@SitePoint)
sur CodePen.

La page HTML a deux <article> éléments avec les identifiants article1 et article2 pour les blocs de contenu :

<main><div id="articleroot">

  <article id="article1">

    <h2>Article 1 content</h2>

    <figure>
      <img src="image1.jpg" width="800" height="500" alt="image" />
    </figure>

    <p>Lorem ipsum dolor sit amet...</p>

  </article>

  <article id="article2">

    <h2>Article 2 content</h2>

    <figure>
      <img src="image2.jpg" width="800" height="500" alt="image" />
    </figure>

    <p>Ut pretium ac orci nec dictum...</p>

  </article>

</div></main>

UN switchArticle() La fonction gère toutes les mises à jour DOM. Il affiche ou masque chaque article en ajoutant ou supprimant un hidden attribut. Au chargement de la page, l’article actif est déterminé à partir de l’URL de la page location.hash ou, si ce n’est pas défini, le premier <article> élément:

const article = document.getElementsByTagName('article');


switchArticle();


function switchArticle(e) {

  const hash = e?.target?.hash?.slice(1) || location?.hash?.slice(1);

  Array.from(article).forEach((a, i) => {

    if (a.id === hash || (!hash && !i)) {
      a.removeAttribute('hidden');
    }
    else {
      a.setAttribute('hidden', '');
    }

  });

}

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

document.body.addEventListener('click', e => {

  if (!e?.target?.hash) return;
  switchArticle(e);

});

Nous pouvons maintenant mettre à jour ce gestionnaire pour utiliser Afficher les transitions en passant le switchArticle() fonctionner comme un rappel à document.startViewTransition() (vérifier que l’API est disponible en premier) :

document.body.addEventListener('click', e => {

  if (!e?.target?.hash) return;

  if (document.startViewTransition) {

    
    document.startViewTransition(() => switchArticle(e));

  }
  else {

    
    switchArticle(e);
  }

});

document.startViewTransition() prend un instantané de l’état initial, exécute switchArticle()prend un nouvel instantané du nouvel état et crée un fondu d’une demi-seconde par défaut entre les deux.

Les sélecteurs suivants sont disponibles dans CSS pour cibler les anciens et nouveaux états :

::view-transition-old(root) {
  
}

::view-transition-new(root) {
  
}

L’exemple ci-dessus augmente la durée de l’animation à une seconde pour que l’effet de fondu soit plus visible :

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
}

UN view-transition-group(root) peut appliquer des effets aux deux old et new états en même temps, bien qu’il soit peu probable que nous appliquions la même animation dans la plupart des cas.

Mises à jour DOM asynchrones

Le rappel est passé à document.startViewTransition() peut renvoyer une promesse afin que les mises à jour asynchrones soient possibles. Par exemple:

document.startViewTransition(async () => {

  const response = await fetch('/some-data');
  const json = await response.json();
  doDOMUpdates(json);
  await sendAnalyticsEvent();

});

Cela fige la page jusqu’à ce que la promesse soit tenue, de sorte que les retards pourraient avoir un impact sur l’expérience utilisateur. Il est plus efficace d’exécuter autant de code que possible dehors l’appel à .startViewTransition(). Par exemple:

const response = await fetch('/some-data');
const json = await response.json();

document.startViewTransition(() => doDOMUpdates(json));

await sendAnalyticsEvent();

Créer des transitions plus sophistiquées

La démo CodePen suivante ajoute une animation plus agréable en utilisant le ::view-transition-old(root) et ::view-transition-new(root) sélecteurs.

Voir le stylo
Exemple 2 de l’API Transitions par SitePoint (@SitePoint)
sur CodePen.

Le CSS définit transition-out et transition-in animations avec fondu et rotation :

::view-transition-old(root) {
  animation: 1s transition-out 0s ease;
}

::view-transition-new(root) {
  animation: 1s transition-in 0s ease;
}

@keyframes transition-out {
  from {
    opacity: 1;
    translate: 0;
    rotate: 0;
  }
  to {
    opacity: 0;
    translate: -3rem -5rem;
    rotate: -10deg;
  }
}

@keyframes transition-in {
  from {
    opacity: 0;
    translate: 3rem 5rem;
    rotate: -10deg;
  }
  to {
    opacity: 1;
    translate: 0;
    rotate: 0;
  }
}

Les animations s’appliquent à toute la page, y compris le <header> élément, qui semble un peu étrange. Nous pouvons appliquer des animations (ou aucune animation) à des éléments individuels en définissant un view-transition-name:

header {
  view-transition-name: header;
}

Nous pouvons maintenant cibler cet élément et appliquer une animation différente :

::view-transition-old(header) {
}

::view-transition-new(header) {
}

Dans ce cas, nous ne voulons pas que l’en-tête ait des effets, il n’est donc pas nécessaire de définir une animation. Le ::view-transition-old(root) et ::view-transition-new(root) les sélecteurs s’appliquent maintenant à tous les éléments sauf pour le <header>. Il reste en place.

Voir le stylo
Exemple 3 de l’API Transitions par SitePoint (@SitePoint)
sur CodePen.

Étant donné que nous définissons les effets dans CSS, nous pouvons utiliser les fonctionnalités de l’outil de développement telles que le panneau Animations pour examiner et déboguer nos animations plus en détail.

Utilisation de l’API Web Animations

Alors que CSS est suffisant pour la plupart des effets, le API d’animation Web permet un contrôle supplémentaire de la synchronisation et des effets en JavaScript.

document.startViewTransition() renvoie un objet qui exécute un .ready promesse qui se résout lorsque la transition old et new des pseudo-éléments sont disponibles (notez pseudoElement propriété au deuxième .animate() paramètre):

const transition = document.startViewTransition( doDOMupdate );

transition.ready.then( () => {

  document.documentElement.animate(
    [
      { rotate: '0deg' },
      { rotate: '360deg' },
    ],
    {
      duration: 1000,
      easing: 'ease',
      pseudoElement: '::view-transition-new(root)',
    }
  );

});

Création de transitions de navigation multi-pages

Nous pouvons également utiliser View Transitions lorsque l’utilisateur navigue entre les chargements de page sur des applications multipages (MPA) telles que les sites WordPress typiques. C’est connu comme le viewTransition API for navigationsque nous devons activer dans chrome://flags/ dans Chrome 115 (actuellement le Canary nightly build pour les développeurs). L’indicateur est également disponible dans les versions précédentes du navigateur, mais l’API peut être manquante ou instable.

Le processus est plus simple que les transitions sur la page, car il est activé avec une seule balise META dans le code HTML. <head>:

<meta name="view-transition" content="same-origin" />

On peut alors définir ::view-transition-old et ::view-transition-new sélecteurs CSS de manière identique à ceux présentés ci-dessus. Nous n’avons pas besoin de JavaScript, sauf si nous voulons utiliser le API d’animation Web.

L’API de navigation peut ou non être activée par défaut lors de la sortie de Chrome 115 final. Nous pouvons utiliser cette technique aujourd’hui, car les navigateurs qui ne prennent pas en charge l’API se rabattront sur des chargements de page standard et non animés.

Désactiver les animations

Les animations peuvent déclencher une gêne chez certaines personnes souffrant de troubles du mouvement. La plupart des systèmes d’exploitation fournissent un paramètre de préférence utilisateur pour désactiver les effets. Nous pouvons détecter cela avec le CSS prefers-reduced-motion requête multimédia et désactivez les animations en conséquence :

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Résumé

L’API View Transitions simplifie les animations lors de la modification des états des éléments dans la page et entre les chargements de page. Des transitions de ce type étaient possibles auparavant, mais elles nécessitaient une quantité considérable de JavaScript — et nous devions faire attention à ne pas casser la navigation du navigateur comme le bouton de retour.

L’API est nouvelle. Il n’y a aucune garantie qu’il restera inchangé, deviendra une norme W3C ou aura des implémentations dans Firefox et Safari. Cependant, nous pouvons utiliser l’API aujourd’hui car il s’agit d’une amélioration progressive. Nos applications continueront de fonctionner dans les navigateurs qui ne prennent pas en charge l’API ; ils ne montreront tout simplement pas les animations. Il y a un risque Il est certain que l’API changera mais, même si nous devons faire de la maintenance, notre ancien code ne devrait pas casser le site et les mises à jour seront probablement minimes.

Le mauvais côté? L’API pourrait conduire à une explosion d’animations ennuyeuses et sauvages sur le Web, car les propriétaires de sites les considèrent comme « sur la marque » ! Idéalement, les animations doivent être rapides et subtiles pour mettre en évidence un changement d’interface utilisateur. Moins c’est souvent plus.

Autres références :