transition-behavior

allow-discrete

Übergänge werden für ununterbrochen animierte Eigenschaften des Elements gestartet.

normal

Übergänge werden nicht für ununterbrochen animierte Eigenschaften des Elements gestartet.

Die transition-behavior Eigenschaft ist nur relevant, wenn sie in Verbindung mit anderen Übergangseigenschaften verwendet wird, insbesondere transition-property und transition-duration, da kein Übergang erfolgt, wenn keine Eigenschaften über einen Zeitraum ungleich Null animiert werden.

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

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

Der transition-behavior Wert kann als Teil einer transition Kurznotation enthalten sein. Wenn er in der Kurznotation enthalten ist, hat der allow-discrete Wert keine Auswirkung auf regulär animierbare Eigenschaften, wenn alle Eigenschaften genutzt oder als Standard gesetzt werden. Das folgende CSS ist äquivalent zu den oben gezeigten Langnotationen:

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

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

Im obigen Ausschnitt ist die transition Eigenschaft zweimal enthalten. Die erste Instanz schließt den allow-discrete Wert nicht ein – dies bietet einen plattformübergreifenden Browser-Support und stellt sicher, dass die anderen Eigenschaften der Karte weiterhin in Browsern übergehen, die transition-behavior nicht unterstützen.

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

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

Zum Beispiel:

• Beim Animieren von display von none zu block (oder einem anderen sichtbaren display Wert) wechselt der Wert zu block bei 0% der Animationsdauer, sodass er während der ganzen Zeit sichtbar ist.
• Beim Animieren von display von block (oder einem anderen sichtbaren display Wert) zu none, wechselt der Wert zu none bei 100% der Animationsdauer, sodass er während der ganzen Zeit sichtbar ist.

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

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

In diesem Beispiel wird ein Popover animiert, während es übergänge von verborgen zu sichtbar und zurück vollzieht.

HTML

Das HTML enthält ein <div> Element, das als Popover mit dem popover Attribut deklariert ist, und ein <button> Element, das als Anzeigeelement des Popovers mit seinem popovertarget Attribut gekennzeichnet 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 ausgeblendet werden, während es in horizontaler Richtung wächst und schrumpft. Wir setzen einen Startzustand 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). Anschließend setzen wir eine transition Eigenschaft, um zwischen den beiden zu animieren.

Da das animierte Element beim Anzeigen in die Top-Ebene verschoben wird und beim Ausblenden von der Top-Ebene entfernt wird — was auch bedeutet, dass sein verborgener Zustand mit display: none darauf gesetzt ist — werden die folgenden Eigenschaften zur Liste der übergangenen Elemente hinzugefügt, um die Animation in beide Richtungen zu realisieren. In beiden Fällen wird transition-behavior: allow-discrete in der Kurznotation gesetzt, um diskrete Animationen zu ermöglichen.

• display: Erforderlich, damit das animierte Element (auf display: block gesetzt) während der Ein- und Ausblendeanimation sichtbar ist. Ohne dies wäre die Ausblendanimation nicht sichtbar; effektiv würde das Popover einfach verschwinden.
• overlay: Erforderlich, um sicherzustellen, dass die Entfernung des Elements aus der Top-Ebene erst nach Abschluss der Animation durchgeführt wird. Dies macht in einfachen Animationen wie dieser keinen großen Unterschied, aber in komplexeren Fällen kann das Element zu schnell aus dem Overlay entfernt werden, was dazu führt, dass die Animation nicht fließend oder wirkungsvoll ist.

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

Ergebnis

Der Code wird wie folgt dargestellt:

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