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:

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

  @starting-style {
    opacity: 0;
  }
}

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.

/* 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;
  }
}

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!