transition-behavior

Syntaxe

/* Valeurs avec un mot-clé */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* Valeurs globales */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

Valeurs

allow-discrete

Les transitions seront démarrées sur l'élément pour les propriétés animées de manière discrète.

normal

Les transitions ne seront pas démarrées sur l'élément pour les propriétés animées de manière discrète.

Description

La propriété transition-behavior n'est pertinente que lorsqu'elle est utilisée en conjonction avec d'autres propriétés de transition, notamment transition-property et transition-duration, car aucune transition ne se produit si aucune propriété n'est animée sur une durée non nulle.

.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

La valeur transition-behavior peut être incluse dans une déclaration raccourcie transition. Lorsqu'elle est incluse dans l'abrégé, en utilisant ou en par défaut toutes les propriétés, la valeur allow-discrete n'a aucun impact sur les propriétés animables normales. Le CSS suivant est équivalent aux déclarations en longue forme ci-dessus :

.card {
  transition: all 0.25s;
  transition: all 0.25s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Dans l'exemple ci-dessus, nous incluons la propriété transition deux fois. La première instance n'inclut pas la valeur allow-discrete — cela fournit une compatibilité entre navigateurs, garantissant que les autres propriétés de la carte continuent de se transitionner dans les navigateurs qui ne prennent pas en charge transition-behavior.

Comportement des animations discrètes

Les propriétés animées de manière discrète basculent généralement entre deux valeurs à 50% de l'animation entre les deux.

Il y a cependant une exception, qui se produit lors de l'animation vers ou depuis display: none ou content-visibility: hidden. Dans ce cas, le navigateur basculera entre les deux valeurs afin que le contenu transitionné soit affiché pendant toute la durée de l'animation.

Par exemple :

• Lors de l'animation de display de none à block (ou une autre valeur display visible), la valeur basculera à block à 0% de la durée de l'animation afin qu'elle soit visible pendant toute la durée.
• Lors de l'animation de display de block (ou une autre valeur display visible) à none, la valeur basculera à none à 100% de la durée de l'animation afin qu'elle soit visible pendant toute la durée.

Définition formelle

Syntaxe formelle

transition-behavior = 
  <transition-behavior-value>#  

<transition-behavior-value> = 
  normal          |
  allow-discrete  

Exemples

Transition d'une fenêtre contextuelle

Dans cet exemple, une fenêtre contextuelle est animée lorsqu'elle transitionne de l'état caché à l'état affiché et inversement.

HTML

Le HTML contient un élément HTML <div> déclaré comme une fenêtre contextuelle en utilisant l'attribut popover, et un élément HTML <button> désigné comme le contrôle d'affichage de la fenêtre contextuelle en utilisant son attribut popovertarget.

<button popovertarget="ma-fenetre-contextuelle">
  Afficher la fenêtre contextuelle
</button>
<div popover="auto" id="ma-fenetre-contextuelle">
  Je suis une fenêtre contextuelle&nbsp;! Je devrais être animée.
</div>

CSS

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

[popover] {
  font-size: 1.2rem;
  padding: 10px;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  /* État final de l'animation de sortie */
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* En utilisant la propriété raccourcie transition, nous pourrions écrire :
    transition: 
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    ou même :
    transition: all 0.7s allow-discrete;
  */
}

/* Doit être inclus après la règle précédente [popover]:popover-open 
   pour prendre effet, car la spécificité est la même */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

Les deux propriétés que nous voulons animer sont opacity et transform : nous voulons que la fenêtre contextuelle s'estompe tout en grandissant et en rétrécissant dans la direction horizontale. Nous définissons un état de départ pour ces propriétés sur l'état caché par défaut de l'élément de la fenêtre contextuelle (sélectionné avec [popover]), et un état final sur l'état ouvert de la fenêtre contextuelle (sélectionné par la pseudo-classe :popover-open). Nous définissons ensuite une propriété transition pour animer entre les deux.

Parce que l'élément animé est promu au niveau supérieur lorsqu'il est affiché et retiré du niveau supérieur lorsqu'il est masqué — ce qui signifie également que son état masqué a display: none défini — les propriétés suivantes sont ajoutées à la liste des éléments transitionnés pour que l'animation fonctionne dans les deux sens. Dans les deux cas, transition-behavior: allow-discrete est défini dans le raccourci pour activer l'animation discrète.

• display : Requis pour que l'élément animé soit visible (défini sur display: block) tout au long de l'animation d'entrée et de sortie. Sans cela, l'animation de sortie ne serait pas visible ; en effet, la fenêtre contextuelle disparaîtrait simplement.
• overlay : Requis pour s'assurer que la suppression de l'élément du niveau supérieur est différée jusqu'à ce que l'animation soit terminée. Cela ne fait pas une grande différence pour des animations de base comme celle-ci, mais dans des cas plus complexes, ne pas le faire peut entraîner la suppression trop rapide de l'élément de la superposition, ce qui signifie que l'animation n'est pas fluide ou efficace.

En outre, un état de départ pour l'animation est défini à l'intérieur de la règle @starting-style. Cela est nécessaire pour éviter un comportement inattendu. Par défaut, les transitions ne sont pas déclenchées lors des premières mises à jour de style des éléments, ou lorsque le type display passe de none à un autre type. @starting-style permet de remplacer ce comportement par défaut de manière contrôlée. Sans cela, l'animation d'entrée ne se produirait pas et la fenêtre contextuelle apparaîtrait simplement.

Résultat

Le code s'affiche comme suit :

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété overlay
• La règle @starting-style
• Le module des transitions CSS
• Quatre nouvelles fonctionnalités CSS pour des animations d'entrée et de sortie fluides ^(angl.) sur developer.chrome.com (2023)