View-transition-name - Propriété CSS

view-transition-name

Résumé des caractéristiques de la propriété view-transition-name

Description rapide
Associe à l'élément ciblé un identifiant de transition.
Statut
Standard
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété view-transition-name passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Transitions d'afichage
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Syntaxe de view-transition-name (schéma).

view-transition-name - Syntax DiagramSyntax diagram of the view-transition-name CSS property. See stylescss.free.fr for details. none none id id auto autoview-transition-name:;view-transition-name:;
Schéma syntaxique de la propriété view-transition-name.
Détails sur les valeurs.

Sur le schéma, le terme id est un identifiant choisi librement.

Description de la propriété view-transition-name.

La propriété view-transition-name facilite la mise en oeuvre des transitions d'affichage (View Transition), en associant un identifiant aux éléments qui doivent être animés pendant la transition. Par défaut l'animation s'applique à la racine du document. Les exemples suivants permettent de visualiser l'utilité de cette propriété.

Pas de transition d'affichage. Les nouveaux éléments remplacent brutalement les anciens.
Cliquez sur l'image pour visualiser le rendu.
Attention, sur un terminal portable il y a toujours par défaut un petit effet de transition.

Argine
Exemple de transition d'affichage

Une transition d'affichage du type 'fondu'. Dans ce cas, l'application de l'animation à l'élément racine de la page (root) n'est pas gênante : les éléments qui ne sont pas modifiés semblent inchangés.

Argine
Exemple de transition d'affichage

Une transition d'affichage plus sophistiquée (rotation et fondu). Appliquer ce genre d'animation à la racine n'est pas envisageable.

Argine
Exemple de transition d'affichage

La propriété view-transition-name définit des identifiants qui pourront être utilisés pour appliquer une animation différente sur des éléments particuliers, et de ne pas appliquer d'animation à la racine.

Argine
Exemple de transition d'affichage
/* Association d'identifiants au titre et à l'image*/ #title4 {view-transition-name:title4;} #image4 {view-transition-name:image4;} /* Application des animations en fonction des identifiants */ ::view-transition-old(title4) {animation:zoom-old 2s;} ::view-transition-new(title4) {animation:zoom-new 2s;} ::view-transition-old(image4) {animation:rotation-old 2s;} ::view-transition-new(image4) {animation:rotation-new 2s;}

Remarque : sur cette page nous avons dû utiliser également la notion de type de transition pour que toutes les animations ne démarrent pas en même temps. La propriété view-transition-name permet uniquement de définir des animations spécifiques à chaque élément, mais toutes ces animations démarrent en même temps.

Pour lire plus d'infos sur les types de transitions, voyez la pseudo-classe active-view-transition-type(), et sur les transitions d'affichage en général, voyez le tutoriel sur les transitions d'affichage.

Valeurs pour view-transition-name.

  • view-transition-name: none;

    C'est la valeur par défaut : aucun identifiant de transition n'est associé à l'élément.

  • view-transition-name: id;

    id est un identifiant choisi par le développeur. les seules valeurs interdites sont none et auto. Cet identifiant peut être repris par les pseudo-éléments ::view-transition-new() et ::view-transition-old() pour la définition d'une animation spécifique à l'élément.

  • view-transition-name: auto; ⚠

    Un identifiant de transition est automatiquement généré, la plupart du temps à partir de l'ID de l'élément.

    Introduite dans le niveau 2 de la spécification, cette valeur n'est pas encore très bien reconnue.

  • view-transition-name: initial; (none) view-transition-name: inherit; view-transition-name: revert; view-transition-name: revertLayer; view-transition-name: unset;

    Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété view-transition-name.

La propriété view-transition-name n'acceptant que des valeurs non numériques, son animation est du type discrete : passage brutal d'une valeur à l'autre.

Néanmoins résultat d'une animation de cette propriété est assez incertain car view-transition-name ne prend effet que lors d'un changement sur la page, soit à la suite d'une action de l'utilisateur, soit par un code Javascript.

Support de view-transition-name.

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
Suppordt par les navigateurs de la propriété view-transition-name qui permet d'appliquer une transition d'affichage à autre chose que la racine (:root).
1
Transitions
d'affichage
2
Propriété
view-transition-name
Estimation de la prise en charge globale.
86%
86%

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

Opéra

Firefox pour Androïd

Firefox

Androïd Brower

Chrome pour Androïd

Samsung Internet

Safari

Safari sur IOS

Chrome

Edge

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Évolution de la propriété view-transition-name.

Voir aussi, concernant les transitions d'affichage.

La spécification qui définit les transitions d'affichage (View Transitions) est dénommée CSS View Transitions Module.
De nombreuses autres notions sont également décrites dans cette même spécification.

Sélecteurs :

::view-transition
Pseudo-élément ciblant des éléments pendant le temps d'une transition d'affichage.
::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.

Directives :

@view-transition
Active ou désactive les transitions d'affichage entre les pages.