transition-behavior

allow-discrete

Übergänge werden für diskret animierte Eigenschaften auf dem Element gestartet.

normal

Übergänge werden nicht für diskret animierte Eigenschaften auf dem Element gestartet.

Die Eigenschaft transition-behavior ist nur relevant, wenn sie in Verbindung mit anderen Übergangseigenschaften verwendet wird, insbesondere transition-property und transition-duration, da kein Übergang stattfindet, wenn keine Eigenschaften über eine von null verschiedene Zeitdauer 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 von transition Deklarationen enthalten sein. Wenn er in der Kurzschreibweise enthalten ist, hat der Wert allow-discrete beim Standardwert für alle Eigenschaften keinen Einfluss auf regulär animierbare Eigenschaften. Der folgende CSS-Code ist äquivalent zu den obigen Langschreibweisen:

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

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

Im obigen Code-Schnipsel ist die Eigenschaft transition zweimal enthalten. Die erste Instanz enthält nicht den Wert allow-discrete — dies gewährleistet Unterstützung in verschiedenen Browsern und stellt sicher, dass die anderen Eigenschaften der Karte in Browsern, die transition-behavior nicht unterstützen, dennoch übergehen.

Diskret animierte Eigenschaften wechseln in der Regel 50% der Animationszeit zwischen zwei Werten.

Es gibt jedoch eine Ausnahme, wenn auf oder von display: none oder content-visibility: hidden animiert wird. In diesem Fall wechselt der Browser zwischen den beiden Werten, sodass der übergangene Inhalt für die gesamte Animationsdauer angezeigt wird.

Beispielsweise:

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

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

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

In diesem Beispiel wird ein Popover animiert, während es übergangsweise von verborgen zu sichtbar und wieder zurück wechselt.

HTML

Das HTML enthält ein <div>-Element, das als Popover mit dem Popover Attribut deklariert ist, und ein <button>-Element, das als Anzeigesteuerung des Popovers mit seinem popovertarget Attribut 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: Das Popover soll ein- und ausblenden, während es sich in horizontaler Richtung vergrößert und verkleinert. Wir setzen einen Ausgangszustand für diese Eigenschaften im standardmäßig verborgenen 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 beiden zu animieren.

Da das animierte Element in die Top-Schicht gehoben wird, wenn es angezeigt wird, und von der Top-Schicht entfernt wird, wenn es verborgen ist — was auch bedeutet, dass sein verborgener Zustand display: none darauf hat — werden die folgenden Eigenschaften zur Liste der übergangenen Elemente hinzugefügt, um die Animation in beide Richtungen zum Funktionieren zu bringen. In beiden Fällen wird transition-behavior: allow-discrete in der Kurzform gesetzt, um diskrete Animationen zu aktivieren.

• display: Erforderlich, damit das animierte Element während sowohl des Eintritts- als auch des Austrittsanimation sichtbar ist (auf display: block gesetzt). Ohne diese würde die Austrittsanimation nicht sichtbar sein; das Popover würde einfach verschwinden.
• overlay: Erforderlich, um sicherzustellen, dass das Entfernen des Elements von der Top-Schicht aufgeschoben wird, bis die Animation abgeschlossen ist. Dies macht keinen großen Unterschied bei einfachen Animationen wie dieser, aber in komplexeren Fällen kann das Nichtmachen dazu führen, dass das Element zu schnell aus dem Overlay entfernt wird, was bedeutet, dass die Animation nicht flüssig oder effektiv ist.

Zusätzlich wird ein Ausgangszustand für die Animation innerhalb der @starting-style at-rule gesetzt. Dies ist notwendig, um unerwartetes Verhalten zu vermeiden. Standardmäßig werden Übergänge nicht bei den ersten Stilaktualisierungen von Elementen ausgelöst oder wenn der display-Typ von none zu einem anderen Typ wechselt. @starting-style ermöglicht es Ihnen, diesen Standard auf eine spezifisch kontrollierte Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.

Ergebnis

Der Code wird wie folgt dargestellt:

• overlay
• @starting-style
• CSS transitions Modul
• Four new CSS features for smooth entry and exit animations auf developer.chrome.com (2023)