# View Transitions pour adoucir la navigation entre une catégorie et une fiche produit WooCommerce

> Une bibliothèque JavaScript de transition de page contre l'API native View Transitions : comparaison sur un cas concret, avec un repli propre pour les navigateurs non couverts.

- Auteur : Clément Hadrot
- Publié le : 2025-07-26
- Mis à jour le : 2025-07-26
- Catégorie : E-commerce
- URL : https://wpmoderne.dev.wordpress-developpement.fr/ecommerce/view-transitions-categorie-fiche-produit-woocommerce/

## L’essentiel

- L'API s'active sans bibliothèque tierce à charger
- Le repli reste une navigation classique, sans rupture fonctionnelle
- Le contrôle fin des animations passe par des pseudo-éléments dédiés

Une bibliothèque JavaScript de transition de page ajoute généralement plusieurs dizaines de kilooctets au poids d'un thème, pour un effet que l'API native View Transitions peut produire sans aucun script supplémentaire, à condition d'accepter un contrôle plus limité sur le détail de l'animation. Comparer les deux approches sur une navigation typique — passer d'une page de catégorie à une fiche produit WooCommerce — permet de juger si ce compromis est acceptable pour un projet donné.

## Ce qu'apportait une bibliothèque de transition classique

Une solution basée sur une bibliothèque tierce intercepte les clics sur les liens internes, charge le contenu de la page suivante en arrière-plan, puis anime la permutation entre l'ancien et le nouveau contenu avec un contrôle précis sur chaque étape. Ce contrôle a un coût : du code JavaScript supplémentaire à charger, à maintenir, et parfois à déboguer lorsque la bibliothèque interfère avec un script tiers qui suppose un rechargement complet de page à chaque navigation.

## Ce que propose l'API native

L'API View Transitions, dans sa version applicable à la navigation entre documents complets, permet d'obtenir un effet de transition visuelle géré directement par le navigateur, sans framework de rendu côté client. Son activation minimale tient en une seule règle CSS :

```
@view-transition {
    navigation: auto;
}
```

Cette déclaration suffit à activer une transition de fondu par défaut entre deux pages du même domaine, sans écrire une seule ligne de JavaScript. Le comportement reste une navigation classique du point de vue du navigateur : l'URL change, l'historique se met à jour normalement, et aucun état d'application complexe n'a besoin d'être géré côté client.

> L'essentiel à retenir : L'API s'active sans bibliothèque tierce à charger ; Le repli reste une navigation classique, sans rupture fonctionnelle ; Le contrôle fin des animations passe par des pseudo-éléments dédiés

## Contrôler la transition sur des éléments précis

Pour que l'image du produit semble se déplacer de la grille de catégorie vers la fiche produit plutôt que de simplement s'estomper, chaque élément concerné reçoit un nom de transition dédié, via la propriété `view-transition-name`, unique pour chaque produit affiché :

```
.produit-vignette img {
    view-transition-name: produit-image-42;
}
```

Le navigateur associe alors automatiquement l'élément portant ce nom sur la page de départ à l'élément portant le même nom sur la page d'arrivée, et anime la transition entre les deux positions et tailles, sans calcul manuel de coordonnées à effectuer côté développeur.

## Le repli pour les navigateurs non couverts

Un navigateur qui ne prend pas en charge cette API ignore simplement la règle `@view-transition` et effectue une navigation classique, sans transition visuelle mais sans rupture fonctionnelle : c'est exactement le comportement recherché pour une amélioration progressive. Aucune détection explicite de compatibilité n'est nécessaire côté développeur, la dégradation étant déjà silencieuse par construction.

## Comparatif rapide

- Poids ajouté : une bibliothèque tierce pèse plusieurs dizaines de kilooctets, l'API native n'en ajoute aucun.
- Contrôle fin : une bibliothèque tierce autorise des séquences d'animation complexes, l'API native reste plus limitée dans ses possibilités actuelles.
- Maintenance : l'API native ne dépend d'aucune mise à jour de dépendance externe à surveiller.
- Couverture navigateur : une bibliothèque tierce peut simuler l'effet sur davantage de navigateurs, au prix du poids mentionné plus haut.

### Un point d'attention pour un thème existant

Sur un thème qui affiche déjà un contenu généré dynamiquement après le chargement initial de la page — un compteur de stock actualisé en différé, par exemple — il faut vérifier que ce contenu réapparaît correctement une fois la transition terminée. L'API ne modifie pas le comportement de ce type de script, mais une transition mal configurée peut donner l'impression fugace que l'élément a disparu, alors qu'il ne fait que se recomposer normalement une fraction de seconde plus tard.

## Notre verdict

Pour une transition simple entre une grille de catégorie et une fiche produit, l'API native suffit largement et évite d'ajouter une dépendance dont le seul rôle est esthétique. Un besoin de séquences d'animation plus élaborées, avec plusieurs étapes coordonnées, justifie encore le recours à une bibliothèque dédiée, mais ce cas reste minoritaire sur une boutique WooCommerce classique.