Les pseudo-éléments relatifs aux transitions d'affichage
@view-transition
::view-transition-group()
::view-transition-image-pair()
::view-transition-old()
::view-transition-new()
Résumé des caractéristiques de la directive @view-transition
Description rapide
Active ou désactive les transitions d'affichage entre les pages. Ces transitions permettent des effets tels que les fondus, le glissement, etc.
Statut
Standard
Utilisable sur
HTML
Module W3C
Module CSS - Transitions d'afichage
Statut du document: WD (document de travail)
Description des pseudo-éléments relatifs aux transitions d'affichage (view Transitions).
Rappel : les transitions d'affichage permettent d'animer les changements qui se font sur la page : insertion, remplacement ou suppression d'éléments, application d'une transformation ou d'un filtre graphique, etc. Une présentation très détaillée des transitions d'affichage est consultable sur la page sur les transitions d'affichage.
Exemple sans transition d'affichage
Cliquez sur l'image
Exemple avec une transition d'affichage
Cliquez sur l'image
Lors d'une transition d'affichage, le navigateur effectue les opérations suivantes :
- Création d'une copie de l'écran avant sa modification.
- Réalisation des modifications sur le document.
- Création d'une copie d'écran une fois les modifications terminées.
- Réalisation d'une animation pour passer progressivement de la première copie d'écran à la deuxième.
Plusieurs pseudo-éléments peuvent être utilisés pour cibler les éléments impactés par la transition d'affichage, et pendant le temps de cette transition. Lorsque cette dernière est terminée, ces sélecteurs ne ciblent plus rien.
::view-transition-old(): cible la copie d'écran avant modification.::view-transition-new(): cible la copie d'écran après les modifications.::view-transition-image-pair(): cible les deux copies d'écran. Ce pseudo-élément n'est pas vraiment utile pour l'auteur des styles, mais il facilite la travail du navigateur en ajoutant un niveau d'isolation : le mélange des images se fait entre les deux copies d'écran, sans interagir avec le reste de la page.::view-transition-group(): cible le parent des éléments précédents.@view-transition: cible la racine de l'arbre construit pour la transition d'affichage.
Les pseudo-éléments qui comportent des parenthèses attendent un identifiant en paramètre. Cet identifiant est défini par la propriété view-transition-name.
A défaut, l'identifiant est root qui signifie que l'animation concerne toute la page.
Le navigateur construit un arbre spécifique aux objets impactés par la transition d'affichage, et totalement distinct du DOM de la page.
Ces objets n'existent que pendant la durée de la transition.
root est un identifiant prédéfini qui indique que la transition s'applique à toute la page.
id est un identifiant défini par la propriété view-transition-name sur un des éléments de la page.
::view-transition
│
├─::view-transition-group(root)
│ │
│ └─::view-transition-image-pair(root)
│ │
│ ├──::view-transition-old(root)
│ │
│ └──::view-transition-new(root)
│
└─::view-transition-group(id)
│
└─::view-transition-image-pair(id)
│
├──::view-transition-old(id)
│
└──::view-transition-new(id)
Exemple d'un code complet (Javascript et CSS).
/* Code Javascript pour déclencher la transition */
script id="tutorial1-js"
function demoVT(el) {
if (document.startViewTransition) {
document.startViewTransition({update:() => demo(el)});
}
else {
alert('Votre navigateur ne traite pas les transitions d\'affichage.');
}
}
function demo(el) {
if(el.src.indexOf('-1.jpg')==-1) {
el.src='img/view-transition-1.jpg';
}
else {
el.src='img/view-transition-2.jpg';
}
}
/script
style
/* Définition des animations */
@keyframes fondu-old {
from {opacity:1;}
to {opacity:0;}
}
@keyframes fondu-new {
from {opacity:0;}
to {opacity:1;}
}
/* Création d'un identifiant pour la transition */
/* Cet identifiant est associé à l'image dont l'ID est 'description1b') */
#description1b {view-transition-name:demo1;}
/* Application des animations aux copies d'écran générées pour la transition */
::view-transition-old(demo1) {
animation:fondu-old 2s;
}
::view-transition-new(demo1) {
animation:fondu-new 2s;
}
/style
Autres pages en rapport avec les transitions d'affichage.
Sur les transition d'affichage.
Associe à l'élément ciblé un identifiant de transition.
Cible la copie d'écran du nouvel état, dans le cas d'une transition d'affichage.
Cible la copie d'écran de l'état antérieur, dans le cas d'une transition d'affichage.
Permet d'appliquer des styles identiques ç différentes transition d'affichage.
Cible un groupe d'éléments créés pendant une transition d'affichage (View Transition).
Plusieurs transitions d'affichage sur une même page.
Cible la racine du document, pandant le temps d'une transition d'affichage.
Cible la racine du document, pandant le temps d'une transition d'affichage d'un certain type.
Transitions d'affichage d'un document à l'autre.
Active ou désactive les transitions d'affichage entre les pages. Ces transitions permettent des effets tels que les fondus, le glissement, etc.
Prise en charge par les navigateurs (compatibilité).
Colonne 1
Prise en charge des transitions d'affichage sur la page (pas d'une page à l'autre). Correspondant au niveau 1 de la spécification.
Colonne 2
Supporte les transitions d'affichage d'une page à l'autre (niveau 2 de la spécification).
Colonne 3
Support de la liste des pseudo-éléments en rapport avec les transitions d'affichage.
1
Transitions d'affichage
sur une même page
sur une même page
2
Transitions d'affichage
d'un document à l'autre
d'un document à l'autre
3
Pseudo-éléments
::view-transition...Estimation de la prise en charge globale.
86%
81%
87%
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Samsung Internet
Chrome
Edge
Firefox
Opéra
Chrome pour Androïd
Safari sur IOS
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Évolution des pseudo-éléments relatifs aux transitions d'affichage.
Le niveau 1 de la spécification permet les transitions d'affichage au sein de la page (pas d'une page à l'autre). Tous les pseudo-éléments décrits ici étaient déjà définis dans ce niveau 1.
-
Module CSS - Transitions d'afichage - Niveau 1
Première présentation des transitions d'affichage.
Et définition des pseudo-éléments qui s'y rattachent.
25 Octobre 2022Document de travail.
05 Septembre 2023Candidat à la recommandation.
-
Module CSS - Transitions d'afichage - Niveau 2
Le niveau 2 de la spécification permet les transitions d'affichage entre les pages.
Mais cela n'impacte pas les pseudo-éléments déjà existants.16 Mai 2024Document de travail.
Voir aussi, au sujet des transitions d'affichage.
Sélecteurs :
::view-transition-group()
Cible un groupe d'éléments créés pendant une transition d'affichage (View Transition).
::view-transition-image-pair()
Cible les deux copies d'écran réalisées pour les besoins d'une transition d'affichage (View Transition).
::view-transition-new()
Cible la copie d'écran du nouvel état, dans le cas d'une transition d'affichage.
::view-transition-old()
Cible la copie d'écran de l'état antérieur, dans le cas d'une transition d'affichage.
:active-view-transition
Cible la racine du document, pandant le temps d'une transition d'affichage.
:active-view-transition-type()
Cible la racine du document, pandant le temps d'une transition d'affichage d'un certain type.
Propriétés :
view-transition-name
Associe à l'élément ciblé un identifiant de transition.
Directives :
@view-transition
Active ou désactive les transitions d'affichage entre les pages. Ces transitions permettent des effets tels que les fondus, le glissement, etc.