::view-transition-image-pair()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
rootpar 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-classprécédé d'un point (.).
Examples
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-image-pair(.card) {
isolation: isolate;
}
Spécifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |
Compatibilité des navigateurs
Loading…