Une carte produit qui glisse doucement d’une position à l’autre entre deux pages de résultats, sans qu’une seule ligne de JavaScript n’orchestre cette animation : c’est ce que permet l’API CSS de transitions de vue, appliquée à un bloc Query. Ce guide s’adresse à un développeur qui veut obtenir cette transition douce entre deux pages de résultats, sans traiter la pagination côté serveur elle-même, qui reste un sujet distinct.
Le principe général de l’API repose sur une capture d’écran automatique de l’état avant et après un changement de contenu, que le navigateur interpole ensuite lui-même, à condition que les éléments concernés portent un identifiant de transition cohérent d’un état à l’autre.
Identifier les éléments à faire glisser
La propriété view-transition-name attribue un identifiant unique à un élément, que le navigateur utilise pour faire correspondre son ancienne position à sa nouvelle position lors du changement de page. Pour un bloc Query qui affiche une grille de cartes, chaque carte doit recevoir un identifiant distinct, généralement dérivé de l’identifiant de l’article affiché :
.wp-block-post-featured-image {
view-transition-name: var(--nom-transition);
}La valeur de view-transition-name doit rester statique ou passer par une variable CSS : elle ne peut pas être calculée directement dans la feuille de style à partir de l’identifiant de l’article. Cette variable se pose donc en ligne, sur chaque carte, au moment du rendu, via le filtre render_block_core/post-featured-image qui reçoit l’instance du bloc et son contexte :
add_filter( 'render_block_core/post-featured-image', function ( $contenu, $bloc, $instance ) {
$id_article = $instance->context['postId'] ?? 0;
if ( ! $id_article || '' === $contenu ) {
return $contenu;
}
$balises = new WP_HTML_Tag_Processor( $contenu );
if ( $balises->next_tag( 'figure' ) ) {
$style = (string) $balises->get_attribute( 'style' );
$balises->set_attribute(
'style',
trim( $style . ' --nom-transition: carte-' . (int) $id_article . ';' )
);
}
return $balises->get_updated_html();
}, 10, 3 );Le troisième paramètre du filtre est l’instance du bloc, dont la propriété context contient l’identifiant de l’article en cours dans la boucle. Le résultat est un attribut style du type --nom-transition: carte-42; sur chaque image mise en avant : la règle CSS lit cette variable, et chaque carte obtient un nom unique sans qu’on l’écrive dans la feuille de style. Le test sur le contenu vide évite de traiter les articles sans image, pour lesquels le bloc ne produit rien.
Activer la transition entre deux pages
Jusqu’ici, nous avons nommé des éléments. Il reste à demander au navigateur d’animer le passage d’une page à l’autre. Pour une navigation classique, avec rechargement complet, la déclaration tient en une règle CSS :
@view-transition {
navigation: auto;
}
::view-transition-group(*) {
animation-duration: 0.35s;
animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}La règle @view-transition avec navigation: auto active la transition pour les navigations entre deux documents de la même origine. Elle doit figurer sur les deux pages concernées, ce qui est naturel puisque la feuille de style du thème est partagée. Le sélecteur ::view-transition-group(*) cible le groupe de chaque élément nommé : la durée et la courbe s’appliquent ainsi à toutes les cartes. Le bloc final respecte la préférence de réduction des animations du système, que vous ne devez jamais ignorer : une animation de déplacement peut provoquer une gêne réelle chez certaines personnes.
Le support dépend du navigateur et de la version : les navigateurs fondés sur Chromium gèrent les transitions entre documents depuis 2024, Safari les gère depuis sa version 18.2, tandis que d’autres navigateurs ne les prennent pas en charge à la date de rédaction. Vérifiez l’état actuel sur un tableau de compatibilité avant de vous engager sur un public cible. Dans tous les cas, la règle est ignorée par un navigateur qui ne la comprend pas, et la navigation se fait sans animation, comme avant.
Ce que le navigateur anime réellement
Un point déçoit souvent au premier essai : entre la page 1 et la page 2 d’une liste d’articles, les articles affichés ne sont pas les mêmes. Une carte qui n’existe que dans l’ancien état disparaît en fondu, une carte qui n’existe que dans le nouvel état apparaît en fondu : il n’y a rien à faire glisser, puisque aucun nom n’est commun aux deux états. Le déplacement n’a lieu que pour les éléments présents des deux côtés, par exemple quand un tri ou un filtre par catégorie réorganise la liste, ou quand une carte de la liste devient l’image de tête de l’article ouvert.
C’est l’usage le plus convaincant de la technique : l’image d’une carte qui s’agrandit pour devenir l’illustration de la page de l’article. Pour cela, l’image mise en avant de la page de l’article doit porter le même nom que celle de la carte, construit à partir du même identifiant d’article. Le même filtre de rendu s’applique alors au bloc de l’image mise en avant sur le modèle d’article.
Un cas concret : un catalogue filtrable
Un catalogue de réalisations propose des filtres par catégorie, implémentés comme de simples liens vers l’archive de la catégorie. Sans aucun script, l’ajout de la règle @view-transition et des noms de transition sur les images donne ceci : quand le visiteur choisit « Rénovation », les cartes de cette catégorie glissent vers leurs nouvelles positions, pendant que les autres s’estompent. Le rendu reste côté serveur, l’adresse change normalement, le bouton retour fonctionne, et le référencement n’est pas modifié, puisque chaque état a sa propre adresse.
La meilleure animation est celle qu’on obtient sans rien casser : les liens restent des liens, et le navigateur s’occupe du reste.
Les pièges à connaître
- Attribuer le même nom à deux éléments d’une même page : le navigateur abandonne alors la transition entière, sans message. Un identifiant dérivé de l’article garantit l’unicité, à condition que le même article n’apparaisse pas deux fois sur la page, par exemple dans une boucle « à lire aussi ».
- Nommer tous les éléments de la page : chaque nom crée ses propres calques pendant l’animation. Limitez-vous aux quelques cartes visibles, les images mises en avant suffisent.
- Oublier la réduction des animations : c’est une question d’accessibilité, pas un détail d’esthétique.
- Attendre un effet sur la pagination améliorée du bloc Query : celle-ci remplace la région de la page par du JavaScript, sans rechargement, et son comportement vis-à-vis des transitions dépend de la version du routeur embarqué. Testez-le plutôt que de le supposer.
- Déclarer
@view-transitiondans une feuille de style qui ne se charge pas sur toutes les pages concernées : la transition exige que les deux documents l’activent.
Quand ne pas utiliser cette technique
Si la page est longue à charger, la transition masque mal le retard et peut donner une impression de lenteur : traitez d’abord la performance. Si le contenu change entièrement entre deux états, sans élément commun, le fondu par défaut suffit et les noms de transition n’apportent rien. Et si votre public utilise en majorité un navigateur qui ne gère pas l’API, l’effort n’est pas perdu, puisque le site reste fonctionnel, mais l’effet ne sera pas vu : mesurez avant d’investir du temps de finition.
Vérifier le résultat
Ouvrez la liste dans un navigateur compatible, puis activez le ralentissement des animations dans les outils de développement : le panneau des animations permet de mettre en pause une transition de vue et d’inspecter les pseudo-éléments créés. Vérifiez qu’aucun nom n’est en double, en cherchant dans le code source les valeurs de --nom-transition. Testez enfin avec l’option de réduction des animations activée dans le système : aucun déplacement ne doit plus être visible.
Conclusion
Trois éléments suffisent : un nom unique par carte, posé par un filtre de rendu ; une règle @view-transition qui active la transition entre deux documents ; et une protection pour les personnes qui réduisent les animations. Le reste appartient au navigateur. Ne demandez pas à cette technique plus qu’elle ne fait : elle anime des éléments communs à deux états, elle ne remplace ni la pagination ni l’optimisation des performances.
