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 :
