::view-transition-image-pair()

Le pseudo-élément CSS ::view-transition-image-pair() représente un conteneur pour les états de vue « old » et « new » d'une transition de vue — avant et après la transition.

Durant une transition de vue, ::view-transition-image-pair() 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 seulement un enfant d'un ::view-transition-group(). En termes d'enfants, il peut avoir un ::view-transition-new() ou un ::view-transition-old(), ou les deux.

::view-transition-image-pair() est donné le style par défaut suivant dans la feuille de style l'agent utilisateur :

:root::view-transition-image-pair(*) {
 position: absolute;
 inset: 0;
 animation-duration: inherit;
 animation-fill-mode: inherit;
 animation-delay: inherit;
}

Durant une transition de vue, ::view-transition-image-pair() a isolation: isolate défini sur lui dans la feuille de style de transition de vue afin que ses enfants puissent être mélangés avec des modes de fusion non normaux sans affecter d'autres sorties visuelles.

Syntax

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

Parameters

*

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

root

Fait correspondre le pseudo-élément au groupe de capture d'instantané de transition de vue root par défaut créé par l'agent utilisateur pour contenir la transition de vue pour l'ensemble de la page. Ce groupe inclut tout élément non assigné à son propre groupe d'instantané 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 (.).

Examples

::view-transition-image-pair(root) {
 isolation: auto;
}
::view-transition-image-pair(.card) {
 isolation: isolate;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

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