::view-transition-old()
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-old() représente l'état de vue « old » d'une transition de vue — une représentation instantanée de l'état avant la transition.
Lors d'une transition de vue, ::view-transition-old() est inclus dans l'arbre des pseudo-éléments associés comme expliqué dans L'arbre des pseudo-éléments de transition de vue, à condition qu'il y ait un état de vue « old » à représenter. Il est seulement un enfant d'un ::view-transition-image-pair(), et n'a jamais d'enfants.
C'est un élément remplacé et peut donc être manipulé avec des propriétés telles que object-fit et object-position. Il a des dimensions naturelles égales à la taille du contenu.
Le style par défaut suivant est inclus dans la feuille de style de l'agent utilisateur :
:root::view-transition-old(*),
:root::view-transition-new(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
block-size: auto;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
/* Keyframes pour le mélange lorsqu'il y a 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
from {
mix-blend-mode: plus-lighter;
}
to {
mix-blend-mode: plus-lighter;
}
}
@keyframes -ua-view-transition-fade-out {
to {
opacity: 0;
}
}
Note :
Des styles de transition de vue supplémentaires sont également configurés pour animer ::view-transition-old(). Ceux-ci 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.
Syntaxe
::view-transition-old([ <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-
Fait correspondre le pseudo-élément au groupe de transition de vue par défaut
rootcréé 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-classprécédé d'un point (.).
Exemples
figcaption {
view-transition-name: figure-caption;
}
@keyframes grow-x {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes shrink-x {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
height: auto;
right: 0;
left: auto;
transform-origin: right center;
}
::view-transition-old(figure-caption) {
animation: 0.25s linear both shrink-x;
}
::view-transition-new(figure-caption) {
animation: 0.25s 0.25s linear both grow-x;
}
Spécifications
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-old |
Compatibilité des navigateurs
Loading…