transition-behavior

Syntax

/* Keyword values */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

Werte

allow-discrete

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

normal

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

Beschreibung

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 eine Dauer 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 Kurzschreibweise in einer transition-Deklaration enthalten sein. Wenn er in der Kurzschreibweise enthalten ist und alle Eigenschaften verwendet oder als Standard gesetzt werden, hat der Wert allow-discrete keinen Einfluss auf regulär animierbare Eigenschaften. Das folgende CSS ist gleichbedeutend mit den obigen Langschreibe-Deklarationen:

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

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

Im obigen Snippet inkludieren wir die transition-Eigenschaft zweimal. Die erste Instanz enthält nicht den allow-discrete-Wert — dies bietet plattformübergreifende Unterstützung und stellt sicher, dass die anderen Eigenschaften der Karte weiterhin in Browsern übergehen, die transition-behavior nicht unterstützen.

Diskretes Animationsverhalten

Diskret animierte Eigenschaften wechseln im Allgemeinen zwischen zwei Werten nach 50 % des Animationsverlaufs.

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

Zum Beispiel:

• 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 die ganze Zeit 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 die ganze Zeit sichtbar ist.

Formale Definition

Formale Syntax

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

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

Beispiele

Übergang eines Popovers

In diesem Beispiel wird ein Popover animiert, während es vom verborgenen in den sichtbaren Zustand übergeht und wieder zurück.

HTML

Das HTML enthält ein <div>-Element, das als Popover mit dem popover-Attribut deklariert ist, und ein <button>-Element, das als Anzeige-Steuerung des Popovers mit seinem popovertarget-Attribut bezeichnet 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: "Helvetica", "Arial", 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 zwei Eigenschaften, die wir animieren möchten, sind opacity und transform: wir möchten, dass das Popover ein- und ausfadet, während es in horizontaler Richtung wächst und schrumpft. Wir setzen einen Ausgangszustand für diese Eigenschaften im Standardzustand des verborgenen Popover-Elements (ausgewählt über [popover]) und einen Endzustand im geöffneten Zustand des Popovers (ausgewählt über die :popover-open-Pseudoklasse). Anschließend setzen wir eine transition-Eigenschaft, um zwischen beiden zu animieren.

Da das animierte Element in die oberste Schicht befördert wird, wenn es sichtbar ist, und aus der obersten Schicht entfernt wird, wenn es verborgen ist — was auch bedeutet, dass sein verborgener Zustand mit display: none gesetzt ist — werden die folgenden Eigenschaften zur Liste der übergangenen Elemente hinzugefügt, um die Animation in beide Richtungen zu ermöglichen. 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 (auf display: block gesetzt) während beider Ein- und Austrittsanimationen sichtbar ist. Ohne dies wäre die Austrittsanimation nicht sichtbar; in der Tat würde das Popover einfach verschwinden.
• overlay: Erforderlich, um sicherzustellen, dass die Entfernung des Elements aus der obersten Schicht erst erfolgt, nachdem die Animation abgeschlossen ist. Dies macht zwar bei grundlegenden Animationen wie dieser nicht viel aus, aber in komplexeren Fällen kann das Nichtanwenden 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 Anfangszustand für die Animation in der @starting-style-Regel gesetzt. Dies ist erforderlich, 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 verändert wird. @starting-style ermöglicht es, diesen Standard in spezifischer kontrollierter Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht ablaufen und das Popover würde einfach erscheinen.

Ergebnis

Der Code wird wie folgt gerendert:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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