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

Bramus

Lors de la conférence Google I/O 2024, j'ai annoncé la prochaine étape pour les transitions d'affichage: les transitions d'affichage entre plusieurs documents dans les applications multipages (MPA).

Par ailleurs, j'ai fait part de quelques améliorations qui vous permettent de travailler plus facilement avec les transitions d'affichage en général.

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

Ces améliorations s'appliquent à la fois aux transitions d'affichage d'un même document pour les applications monopages (SPA) et aux transitions d'affichage entre les documents pour l'MPA.

Transitions d'affichage entre les documents pour les MPA

Dans Chrome 111, l'équipe Chrome a lancé des transitions vers l'affichage du même document pour les applications monopages, une fonctionnalité très appréciée par la communauté des développeurs Web.

C'est super de voir ce que beaucoup d'entre vous ont créé avec des transitions d'affichage. Cela va des implémentations classiques qui "font en sorte que la miniature devienne une grande photo" aux expériences immersives hautement personnalisées, comme celle d'Airbnb. Excellent !

Toutefois, l'implémentation initiale a nécessité la création d'une SPA pour pouvoir 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 d'affichage entre deux documents différents qui sont de la même origine.

Pour activer les transitions d'affichage entre plusieurs documents, l'utilisateur doit l'activer aux deux extrémités. Pour ce faire, utilisez la règle arobase @view-transition et définissez le descripteur navigation sur auto.

@view-transition {
  navigation: auto;
}

Les transitions de vue d'un document à l'autre reposent sur les mêmes éléments de base et principes que les transitions de vue d'un même document. Les éléments auxquels un 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 plusieurs documents, utilisez les événements pageswap et pagereveal, qui vous permettent d'accéder à l'objet de transition d'affichage.

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

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

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

Démonstration

Cette démo de Stack Navigator présente toutes ces fonctionnalités (ainsi que quelques améliorations).

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

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 savoir comment activer et personnaliser les transitions d'affichage entre plusieurs documents, consultez notre documentation sur les transitions d'affichage entre plusieurs documents.

Améliorations apportées aux transitions d'affichage

En plus de proposer des transitions d'affichage entre plusieurs documents pour MPA, Chrome apporte quelques améliorations à l'utilisation des transitions de vue en général.

Ces améliorations s'appliquent à la fois aux transitions d'affichage d'un même document (pour l'application monopage) et à celle de l'affichage multidocument (pour l'annonce MPA).

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

Jusqu'à présent, pour animer 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 ayant 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 sélecteurs de pseudo pour cibler tous les instantanés correspondants. Cela se traduit par des sélecteurs beaucoup plus simples, qui s'adaptent automatiquement d'un à plusieurs éléments.

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

L'exemple de fiche suivant utilise view-transition-class pour appliquer la même durée d'animation à plusieurs instantanés à l'aide d'un seul sélecteur.

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

Transitions d'affichage sélectif avec des types actifs

Une autre amélioration apportée aux transitions d'affichage est l'ajout de types à une transition de vue lors de sa capture et de son exécution. Il est ainsi plus facile d'utiliser différentes transitions d'affichage sur la même page, sans que les déclarations de l'une ne changent l'autre.

Par exemple, lorsque vous passez à la page suivante ou précédente dans une séquence de pagination, vous pouvez utiliser différentes animations selon que vous accédez à une page supérieure ou inférieure de la séquence.

Avant les types actifs, vous pouviez ajouter des classes au DOM et y répondre 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, en profitant de leurs avantages supplémentaires qui sont automatiquement nettoyés une fois la transition de vue terminée. Les types ne s'appliquent que lors de la capture ou de la transition.

Pour les transitions d'affichage d'un 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 effectuer une transition d'affichage de plusieurs documents, définissez des types dans la règle arobase @view-transition à l'aide du descripteur types, ou définissez-les à la volée dans les événements pageswap et pagereveal.

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

Une fois les types définis, vous pouvez répondre à ces types 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 transition de la 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 transition d'affichage, consultez la documentation dédiée aux transitions vers les vues d'un même document et aux transitions entre les vues d'un document à l'autre.

Commentaires

Vos commentaires sont toujours importants pour les développeurs. Pour ce faire, signalez un problème au groupe de travail CSS sur GitHub en posant des suggestions et en posant des questions. Résolvez le problème avec [css-view-transitions].

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