View-transition-name - Propriété CSS
Résumé des caractéristiques de la propriété view-transition-name
noneview-transition-name passe d'une valeur à l'autre sans transition.Single : valeur unique (l'ordre n'intervient pas).
(1) L'animation de view-transition-name n'affecte pas la transition en cours.
Syntaxe de view-transition-name (schéma).
view-transition-name.Détails sur les valeurs.
Télécharger le schéma en SVG.
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. En effet, 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.
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.
Une transition d'affichage plus sophistiquée (rotation et fondu). Appliquer ce genre d'animation à la racine n'est pas envisageable.
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.
/* 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 transitions d'affichage en général, voyez le tutoriel sur les transitions d'affichage.
Autres pages en rapport avec 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;
idest un identifiant choisi par le développeur. les seules valeurs interdites sontnoneetauto. 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 le 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.
La propriété view-transition-name et Javascript.
Changement l'identifiant des éléments soumis à une transition d'affichage.
Autrement dit, changer la valuer de view-transition-name en Javascript. Deux codes sont donnés ci-après : le premier manipule le tableau des styles, avec
une syntaxe en kebab-case, le deuxième utilise une syntaxe plus proche de la syntaxe objet de Javascript (le nom de la propriété est écrit
en camel-case.
let el = document.getElementById('id');
el.style['view-transition-name'] = 'example';
// ou
let el = document.getElementById('id');
el.style.viewTransitionName = 'example';
Récupération de la valeur de view-transition-name avec Javascript.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et pas en passant par un sélecteur CSS.
Ici aussi deux syntaxes possibles. d'ailleurs ce code est la symétrique du précédent.
let el = document.getElementById('id');
let value = el.style['view-transition-name'];
// ou
let el = document.getElementById('id');
let value = el.style.viewTransitionName;
Récupération de la valeur calculée de view-transition-name.
La valeur calculée est celle qui résulte de la cascade des héritage : valeur appliquée à l'élément via son attribut style ou un sélecteur CSS,
s'il s'agit de inherit, valeur héritée de l'un des parents, ou à défaut valeur initiale de la propriété (none dans le cas
de view-transition-name). La valeur calculée est définie dans tous les cas.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('view-transition-name');
Changement de la valeur de view-transition-name avec JQuery.
JQuery propose également deux syntaxes pour modifier la valeur de view-transition-name.
$('#id').css('view-transition-name', 'example');
// ou
$('#id').css('viewTransitionName', 'example');
Récupération de la valeur calculée de view-transition-name avec JQuery.
Et une syntaxe pour récupéré la valeur calculée, beaucoup plus compacte que celle de Javascript.
let value = $('#id').css('view-transition-name');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery concernant la manipulation des styles CSS sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété view-transition-name et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Dans le cas de cette propriété il n'y aura pas de différence.
Support de view-transition-name.
Les transitions d'affichage sont bien reconnues par tous les navigateurs récents. Néanmoins, d'un document à l'autre, il reste encore des incompatibilités.
view-transition-name qui permet d'appliquer une transition d'affichage à autre chose que la racine (:root).Remarques :
(1) Désactivé par défaut. Peut être activé en positionnant le flag dom.viewTransitions.enabled à TRUE.
sur une même page
d'une page à l'autre
view-transition-nameNavigateurs 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
Évolution de la propriété view-transition-name.
-
Module CSS - Transitions d'afichage - Niveau 1
Ce module de spécification décrit les transitions d'affichage au sein d'un même document. Les transitions d'affichage permettent d'introduire une animation lorsqu'une partie de la page est modifiée.
Concernantview-transition-name. Première définition des transitions d'affichage, et introduction de la propriétéview-transition-name.
25 Octobre 2022Document de travail.
05 Septembre 2023Candidat à la recommandation.
-
Module CSS - Transitions d'afichage - Niveau 2
Ce module de spécification étend la notion de transition d'affichage décrite dans le niveau 1, au passage d'un document à l'autre.
Concernantview-transition-name. Pas de changement concernant la propriétéview-transition-name.16 Mai 2024Document de travail.
Voir aussi, concernant les transitions d'affichage.
La spécification qui définit les transitions d'affichage (View Transitions) est dénommée Module CSS - Transitions d'afichage.
De nombreuses autres notions sont également décrites dans cette même spécification.