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

Bramus

Publié le 16 mai 2024

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

En plus de cela, j'ai partagé quelques améliorations qui vous permettent de travailler plus facilement avec les transitions de vue en général.

• Partager des styles d'animation entre des 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 documents pour les applications multipages (MPA).

Transitions de vue entre les documents pour les MPA

Dans Chrome 111, l'équipe Chrome a lancé les transitions de vue dans le même document pour les applications monopages, une fonctionnalité qui a été 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. Il peut s'agir d'implémentations typiques qui "font grandir la miniature pour afficher la grande photo" ou d'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 d'origine identique.

Pour activer les transitions de vue entre documents, les deux extrémités doivent être activées. Pour ce faire, utilisez la règle @@view-transition et définissez le descripteur navigation sur auto.

@view-transition {
  navigation: auto;
}

Les transitions de vue entre documents utilisent les mêmes blocs de construction et principes que les transitions de vue dans 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 de vue entre documents, utilisez les événements pageswap et pagereveal, qui vous donnent accès à l'objet de transition de vue.

• pageswap vous permet d'apporter des modifications de dernière minute à la page sortante juste avant la prise des anciens instantanés.
• Avec pagereveal, vous pouvez personnaliser la nouvelle page avant qu'elle ne commence à s'afficher après avoir été initialisée.

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

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

Démo

Cette démonstration de Stack Navigator combine toutes ces fonctionnalités (ainsi que quelques améliorations).

Il s'agit d'une MPA avec des 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 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 savoir comment activer et personnaliser les transitions de vue entre documents, consultez notre documentation sur les transitions de vue entre documents.

Améliorations des transitions de vue

En plus des transitions de vue inter-documents pour les applications multipages, Chrome inclut également quelques améliorations pour l'utilisation des 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 documents pour les MPA.

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

Jusqu'à présent, lorsque vous animiez plusieurs instantanés de la même manière, vous deviez cibler chacun d'eux 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 pseudo-sélecteurs pour cibler tous les instantanés correspondants. Les sélecteurs sont ainsi beaucoup plus simples et 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 cartes suivant utilise view-transition-class pour appliquer le même timing 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 vue sélectives avec des types actifs

Une autre amélioration apportée aux transitions de vue est l'ajout de types à une transition de vue 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 différentes animations selon que vous passez à 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.

Les types de transitions de vue vous permettent d'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 documents, définissez les types dans la règle at @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 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 aux transitions de vue dans le même document et aux 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 y ajoutant vos suggestions et questions. Ajoutez le préfixe [css-view-transitions] à votre problème.

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