Nouveautés concernant les transitions d'affichage (Google I/O 2024, mise à jour)

Bramus

Publié le 16 mai 2024

Lors du Google I/O 2024, j'ai annoncé la prochaine étape des transitions de vue: les transitions de vue entre les documents pour les applications multipages (MPA).

De plus, je vous ai présenté quelques améliorations qui vous permettent de gérer plus facilement les transitions de vue en général.

• Partage des styles d'animation entre les pseudo-éléments de transition de vue avec view-transition-class.
• Transitions de vue sélectives avec des types actifs.

Ces améliorations s'appliquent aux transitions de vue dans le même document pour les applications monopages (SPA) et aux transitions de vue entre les documents pour les MPA.

Transitions de vue entre documents pour les MPA

Dans Chrome 111, l'équipe Chrome a publié les transitions de vue du même document pour les applications monopages, une fonctionnalité bien accueillie par la communauté des développeurs Web.

Nous sommes ravis de voir ce que beaucoup d'entre vous ont créé avec les transitions de vue. Cela va des implémentations classiques qui "permettent à la miniature de prendre de l'ampleur pour la photo" à des expériences immersives hautement personnalisées, comme celle d'Airbnb. Excellent !

Toutefois, l'implémentation initiale vous obligeait à créer une SPA pour utiliser les transitions de vue. Depuis Chrome 126, ce n'est plus le cas. Les transitions de vue sont désormais activées par défaut pour les navigations de même origine. Vous pouvez désormais créer une transition de vue entre deux documents différents de même origine.

Pour activer les transitions de vue entre les documents, les deux parties doivent activer cette fonctionnalité. Pour ce faire, utilisez la règle d'instruction @view-transition et définissez le descripteur navigation sur auto.

@view-transition {
  navigation: auto;
}

Les transitions de vue entre les documents utilisent les mêmes composants et principes que les transitions de vue dans le même document. Les éléments auxquels view-transition-name est appliqué sont capturés, et vous pouvez personnaliser les animations à l'aide d'animations CSS.

Pour personnaliser les transitions d'affichage entre documents, utilisez les événements pageswap et pagereveal, qui vous donnent accès à l'objet de transition de vue.

• Avec pageswap, vous pouvez apporter des modifications de dernière minute à la page sortante juste avant que les anciens instantanés ne soient créés.
• Avec pagereveal, vous pouvez personnaliser la nouvelle page avant qu'elle ne commence à s'afficher après son initialisation.

Dans les deux cas, vous avez accès à un objet NavigationActivation pour personnaliser une transition de vue interdocuments en fonction des anciennes et nouvelles entrées de l'historique de destination, ou du type de navigation.

Pour couronner le tout, vous pouvez attendre le chargement du contenu avec le blocage du rendu et vous appuyer sur le préchargement pour améliorer le temps de chargement avant l'exécution de la transition de vue.

Démo

Cette démo du Stack Navigator combine toutes ces fonctionnalités (avec quelques améliorations).

Il s'agit d'une MPA avec des navigations interdocuments, hébergée sur la même origine. Avec pagereveal, le type d'animation est déterminé en fonction des anciennes et nouvelles entrées de l'historique des destinations.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Lire la documentation

Pour en savoir plus sur l'activation et la personnalisation des transitions de vue entre les documents, consultez notre documentation sur les transitions de vue entre les documents.

Améliorations des transitions

En plus de proposer des transitions de vue entre les documents pour les MPA, Chrome inclut également quelques améliorations pour les transitions de vue en général.

Ces améliorations s'appliquent aux transitions de vue dans le même document pour les SPA et aux transitions de vue entre les documents pour les MPA.

Partager des styles d'animation avec view-transition-class

Jusqu'à présent, lorsque vous animez plusieurs instantanés de la même manière, vous deviez cibler chaque instantané individuellement en répétant son pseudo-sélecteur pour chaque élément doté d'un view-transition-name unique.

Avec view-transition-class, vous pouvez désormais ajouter un nom partagé à tous les instantanés. Utilisez ce nom partagé dans les pseudosélecteurs pour cibler tous les instantanés correspondants. Les sélecteurs sont ainsi beaucoup plus simples et peuvent s'adapter automatiquement à un ou plusieurs éléments.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

L'exemple de cartes suivant utilise view-transition-class pour appliquer le même délai d'animation à de nombreux instantanés à l'aide d'un sélecteur.

Pour en savoir plus sur view-transition-class, consultez la documentation dédiée à view-transition-class.

Transitions de la vue sélective avec les types actifs

Un autre affinement des transitions d'affichage consiste à ajouter des types à une transition d'affichage lors de sa capture et de son exécution. Cela permet de travailler plus facilement avec différentes transitions de vue sur la même page, sans que les déclarations de l'une ne modifient l'autre.

Par exemple, lorsque vous passez à la page suivante ou précédente dans une séquence de pagination, vous pouvez utiliser des animations différentes selon que vous passez à une page plus élevée ou plus basse de la séquence.

Avant les types actifs, vous pouviez ajouter des classes au DOM et répondre à ces classes dans votre CSS. Toutefois, vous devrez également effectuer un nettoyage une fois les transitions terminées.

Avec les types de transition de vue, vous pouvez obtenir le même résultat, avec l'avantage supplémentaire que ces types sont automatiquement nettoyés une fois la transition de vue terminée. Les types ne s'appliquent que lors de la capture ou de l'exécution de la transition.

Pour les transitions de vue dans le même document, transmettez types à la méthode startViewTransition, qui accepte désormais un objet. update est la fonction de rappel qui met à jour le DOM, et types est une séquence de chaînes.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Pour une transition de vue entre les documents, définissez des types dans la règle at @view-transition à l'aide du descripteur types ou définissez-les instantanément dans les événements pageswap et pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Une fois les types définis, vous pouvez y répondre dans votre CSS à l'aide des sélecteurs de pseudo-classe :active-view-transition-type() et :active-view-transition qui s'appliquent à la racine de la transition de vue.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Pour en savoir plus sur les types de transitions de vue, consultez la documentation dédiée sur les transitions de vue dans le même document et les transitions de vue entre documents.

Commentaires

Les commentaires des développeurs sont toujours les bienvenus. Pour ce faire, signalez un problème au groupe de travail CSS sur GitHub en lui faisant part de suggestions et de questions. Ajoutez le préfixe [css-view-transitions] à votre problème.

Si vous rencontrez un bug, signalez-le dans Chromium.