L'API View Transitions : changements fluides de page et d'état dans le navigateur
Ce que fait l'API View Transitions, comment fonctionnent les transitions entre documents identiques et entre documents, comment les styliser avec CSS et comment les utiliser de manière responsable.
À retenir
L'API View Transitions permet au navigateur d'animer entre deux états d'une page. Appelez document.startViewTransition() avec une fonction qui met à jour le DOM, et le navigateur capture l'ancienne et la nouvelle vue et anime entre elles, que vous pouvez styliser avec les pseudo-éléments ::view-transition. Il fonctionne dans les applications à page unique et, dans les navigateurs pris en charge, sur les navigations de pages.
Comment ça marche
MDN décrit document.startViewTransition() comme démarrant une transition d'affichage du même document, typique dans les applications à page unique. Le navigateur capture la vue actuelle, exécute votre mise à jour, capture la nouvelle vue et anime entre elles. Par défaut, il s'agit d'un fondu enchaîné ; CSS vous permet de le modifier.
Même document et documents croisés
Les transitions entre documents identiques s'exécutent sur une seule page, comme dans les SPA, et Chrome les prend en charge depuis Chrome 111. Les transitions entre documents s'animent entre des pages distinctes dans des sites multipages, ce qui, selon MDN, était historiquement impossible ; ils utilisent les événements pageswap et pagereveal et un opt-in dans CSS. La prise en charge du navigateur diffère entre les deux, alors vérifiez les tableaux de compatibilité actuels.
Styliser la transition
La plupart des personnalisations sont simples CSS :
- Donnez à un élément un nom de transition de vue pour l'animer séparément du reste de la page, comme une vignette se transformant en image de héros.
- Ciblez ::view-transition-old() et ::view-transition-new() pour personnaliser l'animation.
- Gardez des durées courtes et des mouvements significatifs.
- Enveloppez les animations personnalisées dans des contrôles de préférence à mouvement réduit.
Amélioration progressive
Vérifiez toujours le support avant d'appeler l'API et mettez à jour le DOM directement s'il est manquant. La page devrait fonctionner de manière identique sans l'animation. Évitez les longues transitions de navigation, qui rendent l’ensemble du site plus lent.
Extrait d’implémentation en production
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Principes clés à retenir
- startViewTransition() capture les anciennes et les nouvelles vues et les anime
- Il existe des variantes de même document (SPA) et de plusieurs documents (multipages).
- Style avec les pseudo-éléments view-transition-name et ::view-transition
- Vérifiez le support et revenez à une mise à jour instantanée
- Gardez les transitions courtes et respectez les mouvements réduits
Questions fréquentes
Sources
- View Transition API — Documents Web MDN
- Smooth transitions with the View Transition API — Chrome pour les développeurs