Transition-behavior - Propriété CSS

Schéma de la syntaxe de transition-behavior.

Description de la propriété transition-behavior.

La propriété transition-behavior définit le comportement d'une transition par rapport aux propriétés dont l'animation est du type discrete.

Rappel : certaines propriétés peuvent être animées de façon fluide et progressive. Ce sont généralement les propriétés dont la valeur est un nombre décimal ou une couleur. A l'inverse les propriétés qui attendent une valeur prédéfinie ne peuvent évoluer que d'une façon brutale d'une valeur à une autre.

Ce n'est pas toujours aussi simple. Par exemple l'épaisseur d'un trait de bordure peut être thin, medium ou thick, mais ces valeurs prédéfinies sont associées à des valeurs numériques : 1 pixel pour thin, 3 pixels pour medium, etc. Il en résulte que les transitions peuvent être progressives quand même.
Par contre les valeurs prédéfinies pour le style de trait (solid, dotted, etc.) ne sont pas associées à des valeurs numériques. Dans ce cas, la transition ne se fera pas.

Notre exemple ci-dessous montre la différence entre propriétés discrètes et propriétés qu'il est possible d'interpoler. Pour déclencher la transition, un code Javascript modifie régulièrement l'épaisseur et le style du contour.

On voit également que la propriété discrète change de valeur au début de la transition. C'est là que la propriété transition-behavior intervient : elle provoque un changement de valeur au milieu du temps affecté à la transition.
L'exemple ci-dessous montre une propriété discrète (text-align), objet d'une transition. La propriété transition-behavior reçoit, pour l'exemple de gauche la valeur normal et la valeur allow-discrete pour l'exemple de droite. Dans les deux cas, le curseur montre l'avancement de la transition.

Valeurs pour transition-behavior.

• transition-behavior: normal;

  Les animations ne sont pas exécutées sur les propriétés dont l'animation est discrete. Ce qui veut dire que ces propriétés changent de valeur dès le début de la transition.

  Un code Javascript change périodiquement le contour de ce texte.
  transition-behavior:normal;
• transition-behavior: allow-discrete;

  Les animations sont exécutées aussi bien sur les propriétés dont l'animation est discrete que sur celles dont l'animation est progressive. Bien entendu les propriétés non animables ne sont jamais concernées.

  Un code Javascript change périodiquement le contour de ce texte.
  transition-behavior:allow-discrete;
  <
• transition-behavior: initial; (normal) transition-behavior: inherit; transition-behavior: revert; transition-behavior: revertLayer; transition-behavior: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de transition-behavior.

Étant elle-même une propriété relative aux transitions, la propriété transition-behavior ne peut pas être animée.

Accéder à la propriété transition-behavior par programme.

Changement de la valeur de transition-behavior avec Javascript.

En Javascript, voici comment modifier la valeur de transition-behavior. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['transition-behavior'] = 'allow-discrete'; // ou let el = document.getElementById('id'); el.style.transitionBehavior = 'allow-discrete';

Récupération de la valeur de transition-behavior 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.

let el = document.getElementById('id'); let value = el.style['transition-behavior']; // ou let el = document.getElementById('id'); let value = el.style.transitionBehavior;

Récupération de la valeur calculée de transition-behavior.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives et de la prise en compte éventuelle des valeurs héritées. Dans tous les cas, la valeur calculée est définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('transition-behavior');

Changement de la valeur de transition-behavior avec JQuery.


$('#id').css('transition-behavior', 'allow-discrete');
// ou
$('#id').css('transitionBehavior', 'allow-discrete');


Récupération de la valeur calculée de transition-behavior avec JQuery.

let value = $('#id').css('transition-behavior');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété transition-behavior et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de transition-behavior il n'y aura pas de différence entre ces deux retours car toutes les valeurs acceptées par transition-behavior sont des valeurs prédéfinies.

Compatibilité des navigateurs avec transition-behavior.

La propriété transition-behavior est bien reconnue et traitée par les navigateurs actuels.
Attention cependant aux transitions sur les propriétés display et content-visibility qui supportent mal les transitions, même lorsque transition-behavior a la valeur allow-discrete. Voir à ce sujet la directive @starting-style.

1

Propriété
transition-behavior

Estimation de la prise en charge globale.

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

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Samsung Internet

Safari

Safari sur IOS

KaiOS Browser

Opéra mini

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

Caniuse

Histoire de la propriété transition-behavior.

• Les transitions en CSS - Niveau 2

  Le niveau 2 de la spécification sur les transitions ajoute la possibilité d'appliquer une transition sur une propriété discrète.
  Une nouvelle directive @starting-style permet de définir les valeurs de départ pour les valeurs des propriétés . Il est maintenant possible d'appliquer une transition sur des éléments qui passent de l'état invisible à l'état visible.

  Concernant transition-behavior. Introduction de la propriété transition-behavior.
  

  05 Septembre 2023

  Document de travail.

  

  

  

Voir aussi, au sujet des transitions.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriétés transition-behavior fait partie du module les transitions en CSS, ainsi que les autres propriétés listées ci-dessous :

Propriétés :

Directives :