Jetzt in Baseline: Effekte von Einträgen animieren

Una Kravets

Im Beitrag vier neue CSS-Funktionen für Einstiegs- und Exit-Effekte haben wir einige nützliche Funktionen vorgestellt, die jetzt in Chrome verfügbar waren. Zwei dieser Funktionen, @starting-style und transition-behavior: allow-discrete, sind jetzt mit der Veröffentlichung von Firefox 129 als neue Baseline-Funktionen verfügbar. Sie können jetzt Animationseffekte für Einträge für Elemente erstellen. Dazu gehören auch Animationseffekte aus display: none und Animationen im obersten Layer.

Effekte für Einträge mit @starting-style einrichten

Mit der Regel @starting-style werden die anfänglichen Stile für ein Element definiert, bevor es auf der Seite gerendert wird. Dies ist für Elemente erforderlich, die aus display: none animiert werden, da sie einen Status benötigen, aus dem sie animiert werden sollen.

Sie können @starting-style wie jede andere „at-Regel“ in CSS verwenden, indem Sie die Stile des Elements darin platzieren. Platziere beispielsweise bei einem <dialog> die dialog[open]-Stile in einer @starting-style-Regel. Dies sind die Stile, die verwendet werden, bevor das Dialogfeld geöffnet wird.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Diskrete Animationen mit allow-discrete aktivieren

Außerdem muss zur Unterstützung von Eingabeanimationen für Elemente, die aus display: none animiert werden, z. B. Dialogfelder und Popovers, ein neuer Animationsmodus aktiviert werden, der die Animation diskreter Eigenschaften unterstützt. Diskrete Eigenschaften sind solche, die zwischen Werten nicht interpoliert werden können. Sie können sich diese wie einen Ein-/Aus-Schalter vorstellen. Einige Beispiele sind display, visibility und mix-blend-mode – jede Eigenschaft, bei der das Element der eine oder andere Wert ist. Mit diesem neuen Animationsmodus unterstützt der Browser jetzt das Vertauschen der Werte am 50-%-Punkt und nicht am 0-%-Punkt eines Übergangs.

Es gibt zwei Möglichkeiten, die Eintragseffekte für die Elemente display: none und visibility: hidden zu animieren:

• Die eigenständige Property transition-behavior mit dem Wert allow-discrete.
• Der Wert allow-discrete in der Kurzschreibweise für die Umstellung.

Wir empfehlen die zweite Methode, da die Anwendung von transition-behavior in der Abkürzung transition enthalten ist. Wenn Sie transition-behavior: allow-discrete vor der Abkürzung für den Übergang anwenden, in der Sie die Übergangs-, Timing- und Easing-Funktionen anwenden, ignoriert der Browser transition-behavior.

Wenn Sie dies in der Kurzschreibweise verwenden, müssen Sie das Schlüsselwort allow-discrete nur auf die spezifischen Eigenschaften anwenden, für die diskrete Animationen erforderlich sind. Dies wird im folgenden CSS veranschaulicht, das sowohl die Eigenschaft translate als auch die Eigenschaft display übergibt, aber nur das Schlüsselwort allow-discrete auf die Eigenschaft display anwendet.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Demo: Alles zusammenfügen

Diese Funktionen sind besonders nützlich für Elemente der obersten Ebene, wie das <dialog>-Element oder Komponenten, die das popover-Attribut verwenden. Im folgenden Beispiel wird ein <dialog>-Element vom unteren Rand des Darstellungsbereichs (beginnend mit einer vertikalen Übersetzung von 100 Vh außerhalb des Darstellungsbereichs) bis zur Mitte des Darstellungsbereichs animiert. Wenn <dialog> geöffnet ist, wird die Übersetzung entfernt.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Sie können dies mit CSS-Verschachtelung, einer neu verfügbaren Baseline-Funktion, prägnanter formulieren.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Fazit

Es ist toll, Fortschritte wie diese in Baseline zu sehen, und zumindest ist es eine schöne progressive Verbesserung für diese Elemente. Ohne diese Einstiegseffektelemente erscheinen die Elemente, die in die oberste Ebene oder aus einem display: none-Stil animiert werden, einfach wie bisher ohne Übergang auf Ihrer Seite.

Informationen zum schrittweise optimierten Hinzufügen von Exit-Effekten finden Sie im Artikel Vier neue CSS-Funktionen für reibungslose Einstiegs- und Exit-Animationen. Weitere Informationen zu diesen Funktionen finden Sie in den folgenden Dokumentationsressourcen:

• @starting-style auf MDN
• Übergangsverhalten auf MDN