Vereinfachen Sie Eingabeanimationen mit @starting-style

Das Erstellen reibungsloser Einstiegsanimationen kann eine Herausforderung sein. Die Komplexität der DOM-Ladezeiten und der Animation von display: none führt oft zu frustrierenden Ergebnissen. Die @starting-style-Regel bietet eine optimierte Lösung, indem sie es Ihnen ermöglicht, beim ersten Erscheinen eines Elements explizit Anfangswerte für CSS-Eigenschaften zu definieren und so nahtlose Übergänge von Anfang an sicherzustellen.

Den vollständigen Artikel mit weiteren Beispielen finden Sie hier.

---

Die Grundlagen verstehen

@starting-style legt den Anfangszustand Ihrer CSS-Eigenschaften fest, bevor das Element sichtbar wird – sein „Vorher“-Zustand. Der „Nachher“-Zustand ist in Ihren Standard-CSS-Regeln definiert. So funktioniert es:

<code class="language-css">element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}</code>

Beim ersten Laden setzt @starting-style die Deckkraft des Elements auf 0. Anschließend geht es reibungslos in den Endzustand über (Deckkraft: 1 in diesem Fall). Diese Funktionalität gilt auch, wenn ein Element von display: none in sichtbar übergeht, wodurch es sich perfekt zum Animieren umgeschalteter Elemente eignet.

Verwenden von @starting-style

Sie können @starting-style auf zwei Arten anwenden: verschachtelt im Regelsatz eines Elements (kein Selektor erforderlich) oder separat mit einem Selektor definiert.

Wichtiger Hinweis: Das Verschachteln von @starting-style innerhalb eines Pseudoelements (wie ::before oder ::after) funktioniert nicht wie beabsichtigt. Die Stile wirken sich auf das übergeordnete Element aus, nicht auf das Pseudoelement.

<code class="language-css">/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}</code>

Wichtige Überlegung: @starting-style und die „ursprüngliche Regel“ haben die gleiche Spezifität. Platzieren Sie für eine zuverlässige Anwendung die @starting-style at-Regel immer nach der „ursprünglichen Regel“.

Praktische Anwendungen

@starting-style zeichnet sich durch die Erstellung von Einstiegseffekten und Übergängen aus. Erwägen Sie die Verwendung zum Einblenden von Text beim Laden der Seite oder zum Animieren von Popups und Dialogen. Hier ein paar Beispiele:

Animation von display: none

Der Hauptvorteil von @starting-style ist seine Fähigkeit, sanfte Übergänge für zunächst verborgene Elemente zu erstellen, insbesondere für diejenigen, die von display: none übergehen. Ohne @starting-style ist die Animation dieses Übergangs aufgrund des Fehlens eines definierten Startzustands schwierig. @starting-style löst dieses Problem, indem dieser Anfangszustand bereitgestellt wird.

Ein dialog-Element sorgt für eine klare Veranschaulichung. Sein Körper wechselt zwischen display: none und display: block. Dies zu animieren ist aufgrund der display Eigenschaftsänderung normalerweise nicht möglich, aber @starting-style macht es möglich.

Verblassen und Verrutschen beim Laden der Seite

In diesem Beispiel definiert @starting-style den „Vorher“-Zustand für beide Elemente. Der Fade-Effekt setzt die anfängliche Deckkraft auf 0, während der Slide-Effekt eine Linksverschiebung verwendet.

---

Dieser Artikel konzentrierte sich auf Eintrittsanimationen. Exit-Effekte werden von @starting-style nicht behandelt. Für Exit-Animationen müssen Sie transition-behavior erkunden, ein Thema für eine weitere Diskussion.

Lesen Sie den vollständigen Artikel hier. Besuchen Sie meinen Blog hier.

Das obige ist der detaillierte Inhalt vonVereinfachen Sie Eingabeanimationen mit @starting-style. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!