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 des Elements gestartet.

normal

Übergänge werden nicht für diskrete animierte Eigenschaften des Elements 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 stattfindet, wenn keine Eigenschaften über eine nicht-null Dauer 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 Kurzschrift transition Deklaration aufgenommen werden. Wenn er in die Kurzschrift aufgenommen wird, hat der allow-discrete Wert keinen Einfluss auf regulär animierbare Eigenschaften, wenn alle Eigenschaften verwendet oder darauf zurückgegriffen werden. Der folgende CSS-Code ist gleichwertig zu den ausführlichen Deklarationen oben:

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

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

Im obigen Beispiel schließen wir die transition Eigenschaft zweimal ein. Die erste Instanz enthält nicht den allow-discrete Wert — dies bietet eine plattformübergreifende Unterstützung, um sicherzustellen, dass die anderen Eigenschaften der Karte auch in Browsern übergehen, die transition-behavior nicht unterstützen.

Diskretes Animationsverhalten

Diskret animierte Eigenschaften wechseln im Allgemeinen zwischen zwei Werten 50% der Animation zwischen den beiden.

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

Ein 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 gesamten Dauer 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 gesamten Dauer 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 ü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 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 beiden Eigenschaften, die wir animieren möchten, sind opacity und transform: Wir möchten, dass das Popover ein- und ausblendet, während es sich in horizontaler Richtung vergrößert und verkleinert. Wir setzen einen Startzustand für diese Eigenschaften im Standard-versteckten Zustand des Popover-Elements (ausgewählt über [popover]), und einen Endzustand im offenen Zustand des Popovers (ausgewählt über die :popover-open Pseudo-Klasse). Dann setzen wir eine transition Eigenschaft, um zwischen den beiden zu animieren.

Da das animierte Element in die oberste Ebene verschoben wird, wenn es angezeigt wird, und aus der obersten Ebene entfernt wird, wenn es verborgen wird — was auch bedeutet, dass sein verborgener Zustand display: none darauf gesetzt hat — werden die folgenden Eigenschaften zur Liste der übergangenen Elemente hinzugefügt, um die Animation in beide Richtungen funktionsfähig zu machen. In beiden Fällen wird transition-behavior: allow-discrete in der Kurzschrift gesetzt, um diskrete Animation zu ermöglichen.

• display: Erforderlich, damit das animierte Element (auf display: block gesetzt) während sowohl des Ein- als auch des Ausstiegs durchgehend sichtbar ist. Ohne dies wäre die Austrittsanimation nicht sichtbar; effektiv würde das Popover einfach verschwinden.
• overlay: Erforderlich, um sicherzustellen, dass die Entfernung des Elements von der obersten Ebene bis zum Abschluss der Animation verschoben wird. Dies macht keinen großen Unterschied für grundlegende Animationen wie diese, aber in komplexeren Fällen kann das Unterlassen dieser Maßnahme dazu führen, dass das Element zu schnell aus der Überlagerung entfernt wird, was bedeutet, dass die Animation nicht reibungslos oder effektiv ist.

Darüber hinaus wird ein Startzustand für die Animation innerhalb 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 sich der display Typ von none zu einem anderen Typ ändert. @starting-style erlaubt Ihnen, diese Standardeinstellung auf eine bestimmte kontrollierte Weise zu überschreiben. Ohne dies würde die Eintrittsanimation nicht stattfinden und das Popover würde einfach erscheinen.

Ergebnis

Der Code rendert sich wie folgt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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