transition-behavior

allow-discrete

Transitionen werden für diskrete animierte Eigenschaften auf dem Element gestartet.

normal

Transitionen werden nicht für diskrete animierte Eigenschaften auf dem Element gestartet.

Die transition-behavior-Eigenschaft ist nur relevant, wenn sie in Verbindung mit anderen Transitionseigenschaften verwendet wird, insbesondere transition-property und transition-duration, da keine Transition stattfindet, wenn keine Eigenschaften über eine nicht-null-zählige Dauer animiert werden.

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

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

Der Wert von transition-behavior kann als Teil einer Kurzschreibweise transition-Deklaration enthalten sein. Wenn er in der Kurzschreibweise enthalten ist, hat der allow-discrete-Wert keine Auswirkungen auf reguläre animierbare Eigenschaften, wenn man alle Eigenschaften verwendet oder auf sie zurückgreift. Das folgende CSS entspricht den Langform-Deklarationen oben:

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

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

Im obigen Ausschnitt wird die transition-Eigenschaft zweimal verwendet. Die erste Instanz enthält den allow-discrete-Wert nicht — dies gewährleistet die Unterstützung in verschiedenen Browsern, sodass die anderen Eigenschaften der Karte auch in Browsern, die transition-behavior nicht unterstützen, weiterhin Transitionen durchführen.

Diskret-animierte Eigenschaften wechseln im Allgemeinen in der Mitte zwischen zwei Werten, also bei 50%, während sie zwischen den beiden animieren.

Es gibt jedoch eine Ausnahme, wenn zu oder von display: none oder content-visibility: hidden animiert wird. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der übergangene Inhalt während der gesamten Animationsdauer angezeigt wird.

Zum Beispiel:

• Wenn display von none zu block (oder einem anderen sichtbaren display-Wert) animiert wird, wechselt der Wert bei 0% der Animationsdauer zu block, damit er während der gesamten Zeit sichtbar ist.
• Wenn display von block (oder einem anderen sichtbaren display-Wert) zu none animiert wird, wechselt der Wert bei 100% der Animationsdauer zu none, sodass er während der gesamten Zeit sichtbar ist.

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

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

In diesem Beispiel wird ein Popover animiert, wenn es vom versteckten zum sichtbaren Zustand wechselt und umgekehrt.

HTML

Das HTML enthält ein <div>-Element, das als Popover unter Verwendung des popover-Attributs deklariert ist, und ein <button>-Element, das als Anzeigesteuerung des Popovers mit Hilfe seines popovertarget-Attributs festgelegt ist.

<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

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

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

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

[popover] {
  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* Using the shorthand transition property, we could write:
    transition: 
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    or even:
    transition: all 0.7s allow-discrete;
  */
}

/* Needs to be included after the previous [popover]:popover-open 
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

Die beiden Eigenschaften, die wir animieren möchten, sind opacity und transform: wir möchten, dass das Popover ein- und ausgeblendet wird, während es in horizontaler Richtung wächst und schrumpft. Wir setzen einen Anfangszustand für diese Eigenschaften im standardmäßigen versteckten Zustand des Popover-Elements (ausgewählt über [popover]) und einen Endzustand im offenen Zustand des Popovers (ausgewählt über die :popover-open-Pseudoklasse). Wir setzen dann eine transition-Eigenschaft, um zwischen den beiden zu animieren.

Weil das animierte Element in die obere Ebene verschoben wird, wenn es sichtbar gemacht wird, und aus der oberen Ebene entfernt wird, wenn es versteckt wird — was auch bedeutet, dass sein versteckter Zustand auf display: none gesetzt ist — werden die folgenden Eigenschaften zur Liste der übergangenen Elemente hinzugefügt, damit die Animation in beiden Richtungen funktioniert. In beiden Fällen wird transition-behavior: allow-discrete in der Kurzschreibweise gesetzt, um diskrete Animation zu ermöglichen.

• display: Erforderlich, damit das animierte Element während beider Animationsphasen (Eintritt und Austritt) sichtbar ist (auf display: block gesetzt). Ohne dies wäre die Austrittsanimation nicht sichtbar; das Popover würde im Grunde einfach verschwinden.
• overlay: Erforderlich, um sicherzustellen, dass die Entfernung des Elements aus der oberen Ebene bis zum Abschluss der Animation verzögert wird. Dies macht bei einfachen Animationen wie dieser keinen großen Unterschied, aber in komplexeren Fällen kann es dazu führen, dass das Element zu schnell aus dem Overlay entfernt wird, wodurch die Animation nicht glatt oder effektiv ist.

Zusätzlich wird ein Startzustand für die Animation innerhalb der @starting-style-At-Regel definiert. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Transitionen nicht bei den ersten Stilaktualisierungen von Elementen ausgelöst, oder wenn sich der display-Typ von none in einen anderen Typ ändert. @starting-style ermöglicht es Ihnen, diesen Standard in einer spezifisch gesteuerten Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.

Ergebnis

Der Code wird wie folgt ausgeführt:

• overlay
• @starting-style
• CSS-Übergänge-Modul
• Vier neue CSS-Funktionen für fließende Ein- und Ausgangsanimationen auf developer.chrome.com (2023)