::view-transition-group()
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-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 ».
Note : Les styles de transition de vue sont générés dynamiquement pendant la transition de vue ; voir les sections configurer les pseudo-éléments de transition (angl.) et mettre à jour les styles des pseudo-éléments (angl.) de la spécification pour plus de détails.
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-nameappliqué à:rootfait correspondre le pseudo-élément au groupe de transition de vue par défautroot. 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
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-group |
Compatibilité des navigateurs
Loading…