::view-transition-group()

Le pseudo-élément CSS ::view-transition-group() représente un groupe instantané de transition de vue.

Lors d'une transition de vue, ::view-transition-group() est inclus dans l'arbre des pseudo-éléments associés comme expliqué dans L'arbre des pseudo-éléments de transition de vue. Il est uniquement un enfant de ::view-transition, et a un ::view-transition-image-pair() comme enfant.

::view-transition-group() reçoit le style par défaut suivant dans la feuille de style de l'agent utilisateur :

:root::view-transition-group(*) {
 position: absolute;
 top: 0;
 left: 0;
 animation-duration: 0.25s;
 animation-fill-mode: both;
}

Par défaut, les éléments sélectionnés reflètent initialement la taille et la position du pseudo-élément ::view-transition-old() représentant l'état de vue « old » ou du pseudo-élément ::view-transition-new() représentant l'état de vue « new » s'il n'y a pas d'état de vue « old ».

S'il y a, à la fois, un état de vue « old » et un état de vue « new », les styles dans la feuille de style de transition de vue animent la largeur (width) et la hauteur (height) de ce pseudo-élément de la taille de la boîte de bord de l'état de vue « old » à celle de l'état de vue « new ».

De plus, la transformation de l'élément est animée de la transformation de l'espace écran de l'état de vue « old » à celle de l'état de vue « new ». Ce style est généré dynamiquement puisque les valeurs des propriétés animées sont déterminées au moment où la transition commence.

Syntaxe

::view-transition-group([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
 /* ... */
}

Paramètres

*

Le sélecteur universel (*) ; sélectionne tous les groupes de transition de vue sur une page.

root

Le view-transition-name appliqué à :root fait correspondre le pseudo-élément au groupe de transition de vue par défaut root. C'est le groupe de capture d'écran créé par l'agent utilisateur pour contenir la transition de vue pour l'ensemble de la page. Ce groupe inclut tout élément non affecté à son propre groupe de capture d'écran de transition de vue spécifique via la propriété view-transition-name.

<pt-name-selector>

Le <custom-ident> défini comme valeur de la propriété view-transition-name.

<pt-class-selector>

Le <custom-ident> défini comme valeur de la propriété view-transition-class, précédé d'un point (.).

La specificity du pseudo-élément de transition de vue nommé est égale à la spécificité du sélecteur de type, à moins que le sélecteur universel ne soit utilisé, auquel cas la spécificité est nulle.

Exemples

::view-transition-group(embed-container) {
 animation-duration: 0.3s;
 animation-timing-function: ease;
 z-index: 1;
}
::view-transition-group(.card) {
 animation-duration: 1s;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API de transition de vue
• Transitions fluides avec l'API de transition de vue ^(angl.)