Vous avez déjà remarqué ces applications mobiles où la navigation d’une page à l’autre est fluide, avec des éléments qui glissent ou se transforment naturellement ? Longtemps réservée aux SPA lourdes en JavaScript, cette expérience est désormais accessible à tous les sites web — y compris les bons vieux sites multi-pages — grâce à la View Transitions API.
Supportée nativement par Chrome 126+, Edge et Opera, avec un support Firefox en développement actif, cette API change la donne pour les développeurs web. Dans ce tutoriel, je vous montre comment l’implémenter en 3 lignes, puis comment la personnaliser pour un rendu professionnel.
Étape 1 : Activer les transitions entre pages (3 lignes)
La version la plus simple — et la plus impressionnante — est la transition cross-document. Elle fonctionne entre deux pages HTML distinctes, sans JavaScript. Voici les 3 lignes à ajouter dans votre feuille de style :
/* Ajoutez ceci dans votre CSS global */
@view-transition {
navigation: auto;
}C’est tout. Avec cette règle, toute navigation same-origin entre deux pages de votre site déclenche automatiquement une transition visuelle. Le navigateur prend un snapshot de l’ancienne page, un snapshot de la nouvelle, et effectue un fondu enchaîné (cross-fade) entre les deux.
Conditions à respecter :
- Les deux pages doivent être sur le même nom de domaine (same-origin)
- Le
@view-transitiondoit être présent dans le CSS des deux pages - Le navigateur doit supporter l’API (Chrome 126+, Edge 126+, Opera 112+)
Étape 2 : Personnaliser les éléments qui transitionnent
Le cross-fade par défaut est élégant, mais le vrai pouvoir de l’API réside dans la possibilité de nommer des éléments spécifiques pour qu’ils transitionnent individuellement. Imaginons une grille de produits où chaque carte mène à une page détail :
/* Page liste (products.html) */
.product-card {
view-transition-name: product-thumb;
}
/* Page détail (product-detail.html) */
.product-hero {
view-transition-name: product-hero;
}Chaque élément nommé est capturé par le navigateur, qui le détache du reste de la page et anime sa transformation (position, taille, forme) de manière fluide. Résultat : l’image du produit sur la liste « grossit » visuellement pour devenir l’image principale de la page détail.
⚠️ Règle cruciale : Chaque view-transition-name doit être unique sur la page. Si deux éléments partagent le même nom, la transition est annulée sans avertissement. C’est le piège numéro 1 quand on passe d’une maquette à la production.
Étape 3 : view-transition-name vs view-transition-class
C’est ici que beaucoup de développeurs se trompent. Ces deux propriétés ont des rôles distincts et complémentaires :
/* NAME = identité (obligatoirement unique) */
.card-1 { view-transition-name: product-1; }
.card-2 { view-transition-name: product-2; }
/* CLASS = groupe de style (peut être partagé) */
.card-1 { view-transition-class: product-card; }
.card-2 { view-transition-class: product-card; }Le name répond à la question : « Quel élément de la page A correspond à quel élément de la page B ? »
La class répond à : « Quel style d’animation appliquer à ce groupe d’éléments ? »
Dans votre CSS de transition, vous ciblez la classe pour définir les animations :
/* Toutes les cartes produit partagent la même animation */
::view-transition-group(.product-card) {
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
::view-transition-old(.product-card) {
object-fit: cover;
object-position: top;
}
::view-transition-new(.product-card) {
object-fit: contain;
}Étape 4 : Transitions same-document pour les SPA
Si vous utilisez React, Vue ou vanilla JS pour manipuler le DOM, les transitions same-document sont votre outil :
// JavaScript : déclencher une transition lors d'un changement d'état
function filterProducts(category) {
if (!document.startViewTransition) {
updateProductGrid(category); // fallback navigateurs anciens
return;
}
document.startViewTransition(() => {
updateProductGrid(category);
});
}Le callback que vous passez à startViewTransition() est exécuté pendant que le navigateur a déjà pris le snapshot de l’état actuel. Vous modifiez le DOM, le navigateur prend un second snapshot, et l’animation est calculée automatiquement entre les deux.
Les 3 pièges à éviter absolument
1. Le timeout silencieux de 4 secondes
Si la page met plus de 4 secondes à se charger, la transition est annulée sans erreur visible. Solution : optimisez votre LCP (Largest Contentful Paint) ou utilisez le render blocking :
document.addEventListener('pagereveal', (event) => {
if (event.viewTransition) {
// Bloque le rendu jusqu'à ce que cette promesse soit résolue
event.viewTransition.ready.then(() => {
document.documentElement.classList.add('transition-ready');
});
}
});2. view-transition-name en double
Si deux éléments ont le même name, tout casse. Pour les grilles, générez des noms dynamiquement avec un attribut data :
// JavaScript : générer des noms uniques par ID
document.querySelectorAll('.product-card').forEach(card => {
card.style.viewTransitionName = `product-${card.dataset.id}`;
});3. Oublier le fallback
Tous les navigateurs ne supportent pas l’API. Testez toujours :
/* CSS fallback : aucun style spécifique nécessaire,
le site reste parfaitement fonctionnel sans transitions */
@supports (view-transition-name: test) {
.product-card {
view-transition-name: product-thumb;
}
}Exemple complet : grille produit → page détail
Voici un exemple minimal mais complet pour un site e-commerce :
/* ===== style.css (commun aux deux pages) ===== */
@view-transition {
navigation: auto;
}
/* ===== products.html ===== */
<div class="grid">
<a href="/product/1" class="card" style="view-transition-name: p1">
<img src="tshirt.jpg" alt="T-shirt">
<h3>T-shirt Premium</h3>
</a>
<!-- ... autres produits ... -->
</div>
/* ===== product-detail.html ===== */
<article>
<img src="tshirt.jpg" alt="T-shirt"
style="view-transition-name: p1">
<h1>T-shirt Premium</h1>
<p>Description détaillée...</p>
</article>Résultat : quand l’utilisateur clique sur la carte, l’image « s’agrandit » naturellement vers sa position dans la page détail. Aucune bibliothèque. Aucun JavaScript supplémentaire. Le navigateur gère tout.
Pourquoi adopter la View Transitions API dès maintenant
La View Transitions API n’est pas un gadget cosmétique. Elle résout un vrai problème d’UX : la discontinuité visuelle entre les pages. Dans une SPA, on utilisait des bibliothèques comme Framer Motion ou GSAP pour simuler cette continuité. Avec les MPA classiques, on ne pouvait tout simplement pas le faire.
Cette API est un progressive enhancement parfait :
- Navigateur compatible → transitions fluides
- Navigateur non compatible → navigation classique, aucun dégât
- Zéro dépendance externe
- Fonctionne avec n’importe quel framework ou CMS, WordPress inclus
Testez-la sur votre projet dès aujourd’hui. Le @view-transition { navigation: auto } prend 10 secondes à ajouter et transforme immédiatement la perception de qualité de votre site.
Sources et références
- Cross-document view transitions for multi-page applications — Chrome for Developers
- Cross-Document View Transitions: Scaling Across Hundreds of Elements — CSS-Tricks
- Same-document view transitions — Chrome for Developers
- View Transitions demos — Chrome DevRel
- CSS ident() function proposal — W3C CSSWG (Bramus)
{
« @context »: « https://schema.org »,
« @type »: « Article »,
« headline »: « View Transitions API : ajoutez des animations de navigation natives à votre site en 3 lignes »,
« datePublished »: « 2026-06-01 »,
« dateModified »: « 2026-06-01 »,
« url »: « https://wpadminlab.com/view-transitions-api-tuto-pratique-2026/ »,
« publisher »: {
« @type »: « Organization »,
« name »: « WP Admin Lab »
}
}
📖 À lire aussi : Pipeline ETL moderne avec Airbyte, dbt et PostgreSQL : le guide complet 2026
Commentaires (0)
Laisser un commentaire
Les commentaires sont modérés. Questions WordPress, cybersécurité ou dev web bienvenues.