Geschrieben von Saleh Mubashar??

Bis vor kurzem konnte nur eine begrenzte Anzahl von CSS-Eigenschaften animiert werden. Um beispielsweise einen Ein- oder Ausblendeffekt zu erzeugen, verwenden Sie normalerweise die Opazit?tseigenschaft anstelle der Anzeigeeigenschaft, da letztere nicht animiert werden kann. Das Problem besteht jedoch darin, dass das Element zwar optisch ausgeblendet wird, aber dennoch auf der Seite vorhanden ist.

Kürzlich hat Chrome neue Funktionen eingeführt, die dieses Problem beheben und den Entwicklungsprozess erheblich vereinfachen. In diesem Artikel vergleichen wir die herk?mmlichen Methoden zum Animieren der Anzeige- und Gr??eneigenschaften mit diesen neuen Funktionen.

Das Problem mit der Animation der Anzeige und der Elementgr??e

M?glicherweise mussten Sie irgendwann mit CSS einen Ein-/Ausblendeffekt für ein Element erstellen. Die beste Methode besteht darin, eine Animation oder einen übergang auf die Deckkraft des Elements anzuwenden. Wenn Sie die Deckkraft jedoch auf Null setzen, wird das Element nicht wirklich entfernt, sondern lediglich unsichtbar gemacht. Meistens ist das gut genug.

Angenommen, Sie haben eine Aufgabenliste, in der Benutzer Elemente l?schen k?nnen. Wenn Sie eine Exit-Animation erstellen m?chten, bei der das Element ausgeblendet wird, verwenden Sie normalerweise die Deckkraft. Wenn die H?he der Liste jedoch angepasst werden muss, müssen Sie auch die Anzeige auf ?Keine“ einstellen. Das Problem hierbei ist, dass das Element zwar optisch verschwunden ist, aber dennoch Platz im DOM einnimmt und Dinge wie Layout und Benutzerinteraktionen durcheinander bringt.

Hier ist ein direkter Vergleich zweier Ans?tze: der eine nutzt nur Deckkraft und der andere kombiniert Deckkraft mit Anzeige. Sie k?nnen das folgende Beispiel ausprobieren, um die Unterschiede zu sehen:

Sehen Sie sich den Pen Simple Todo App-Vergleich von Saleh-Mubashar (@saleh-mubashar) auf CodePen an.

Beachten Sie, wie sich das Layout verschiebt, wenn Anzeige mit Deckkraft kombiniert wird, w?hrend die alleinige Verwendung von Deckkraft Lücken in der Liste hinterl?sst. W?hrend die zweite Methode (Deckkraftanzeige) das Layoutproblem l?st, beeintr?chtigt sie den sanften Ausblendeffekt, da ?display: none“ angewendet wird, bevor die Ausblendung abgeschlossen ist. Dies führt eher zu einem pl?tzlichen Verschwinden als zu einem allm?hlichen Verblassen.

Zum Beispiel kann die Opazit?tseigenschaft reibungslos von 0 auf 1 übergehen. Die Anzeigeeigenschaft kann jedoch nicht animiert werden, da sie keinen numerischen Bereich hat – ihre Zust?nde sind bin?r, wie ?Keine“, ?Block“ oder andere Werte. Da es keinen Zwischenwert gibt, kann CSS die Anzeige nicht animieren.

In ?hnlicher Weise stehen Entwickler oft vor Herausforderungen, wenn sie versuchen, die intrinsische Gr??e eines Elements, wie z. B. height: auto, zu animieren. Dies wird h?ufig für überg?nge in zusammenklappbaren Abschnitten wie Akkordeons verwendet, bei denen die H?he im geschlossenen Zustand bei 0 Pixel beginnt und sich beim ?ffnen an den Inhalt anpasst. Obwohl Gr??eneigenschaften wie die H?he normalerweise animiert werden k?nnen (da sie numerische Start- und Endwerte haben), führt die Animation zu oder von automatisch zu Problemen. Der Browser kann die Schritte zwischen 0px und auto nicht berechnen; Dabei müssen aufw?ndige Workarounds eingesetzt werden.

Die traditionellen L?sungen zur Animation von Anzeige und Gr??e

Es gibt mehrere M?glichkeiten, die Herausforderungen bei der Animation von Anzeige- und Elementgr??en zu bew?ltigen. In diesem Abschnitt besprechen wir die beliebtesten L?sungen, die sowohl CSS als auch JavaScript verwenden.

CSS-basierte L?sungen

Es gibt mehrere M?glichkeiten, das Problem zu l?sen, dass die Anzeigeeigenschaft mit CSS nicht animierbar ist. Am zuverl?ssigsten ist es, die Deckkraft zusammen mit einer Gr??eneigenschaft wie H?he oder Breite zu verwenden. In diesem Fall wird die Eigenschaft size verwendet, um das Element effektiv aus dem DOM zu entfernen. Dies kann mithilfe der Eigenschaft ?transition-delay“ erfolgen. Grunds?tzlich fügen wir dem Gr??enübergang eine Verz?gerung hinzu, die der für den Deckkraftübergang eingestellten Zeit entspricht. Sobald das Element ausgeblendet wird, wird seine Gr??e sofort auf Null gesetzt, wodurch es effektiv aus dem Layout entfernt wird, als ob display:none angewendet worden w?re.

Am Beispiel der To-Do-Liste würde die Umsetzung etwa so aussehen:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Hier besteht der Trick darin, die H?he und den Abstand nach einer Verz?gerung auf 0 zu setzen, sobald die Deckkraft auf 0 abf?llt. Die Verz?gerung und die L?nge der Deckkraft müssen gleich sein – in diesem Fall 400 ms. Die H?he: 0 stellt sicher, dass das Listenelement nicht mit dem Layout interagiert. Wie bereits erw?hnt, passt sich height: automatisch dynamisch an den Inhalt an; Daher kann es nicht animiert werden. Daher müssen Sie sicherstellen, dass das Element eine bestimmte, feste H?he hat, damit die Animation ordnungsgem?? funktioniert.

Das Festlegen der Sichtbarkeit auf ?Ausgeblendet“ ist eine weitere h?ufig verwendete Methode. Dadurch wird das Element jedoch nicht aus dem DOM entfernt und es wirkt sich weiterhin wie gewohnt auf das Layout aus, d. h. es beeinflusst die Positionierung der umgebenden Elemente.

Die gebr?uchlichste CSS-L?sung zum Animieren eines Elements auf oder von seiner intrinsischen Gr??e (oder H?he: automatisch) ist die Verwendung von max-height anstelle von height. Es ist nicht die sauberste Implementierung, aber sie erledigt den Job. Grunds?tzlich legen Sie die maximale H?he auf einen Wert fest, der gr??er ist, als das Element jemals erreichen wird. Auf diese Weise wird ein sanfter übergang nachgeahmt, ?hnlich der Animation einer festen H?he:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Der offensichtlichste Nachteil dieses Ansatzes besteht darin, dass Sie sicherstellen müssen, dass die maximale H?he immer gr??er ist als der tats?chliche Inhalt im Element. Ein weiteres Problem besteht darin, dass sich der übergangszeitpunkt ungenau anfühlen kann, es sei denn, die Inhaltsh?he stimmt perfekt mit dem Wert für die maximale H?he überein.

Angenommen, Ihr Inhalt ist 400 Pixel hoch, Sie legen die maximale H?he jedoch auf 1000 Pixel fest. Die Animation wird technisch gesehen für die gesamte Dauer (sagen wir zwei Sekunden) fortgesetzt. Optisch h?rt das Element jedoch auf zu wachsen, sobald es die tats?chliche H?he des Inhalts (400 Pixel) erreicht, w?hrend die maximale H?he weiterhin auf 1000 Pixel übergeht. In diesem Fall ist die übergangsdauer also kürzer als die von Ihnen angegebene.

JavaScript-Methoden

Alle oben besprochenen CSS-L?sungen sind recht komplex und k?nnen zu unvorhersehbaren Ergebnissen führen. Bis vor Kurzem war JavaScript der zuverl?ssigste Weg, dies zu erreichen.

Um ?keine Anzeige“ nach einem Deckkraftübergang anzuwenden, k?nnen wir entweder die Funktion ?setInterval“ oder ?setTimeout“ verwenden, um eine Verz?gerung hinzuzufügen, die der Dauer des Deckkraftübergangs entspricht. Nach dieser Verz?gerung k?nnen Sie die Anzeige auf ?Keine“ einstellen. Hier ist ein Beispiel:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

In diesem Code wird das Element nach dem Klicken auf die Schaltfl?che eine Sekunde lang ausgeblendet und dann wird seine Anzeige sofort auf ?Keine“ gesetzt – wodurch es im Wesentlichen aus dem Layout entfernt wird.

Um die intrinsische Gr??e zu animieren, k?nnen wir in ?hnlicher Weise die H?he des Elements in JavaScript berechnen und diesen Wert als Endpunkt für die H?he verwenden. Dieser Ansatz ist wesentlich zuverl?ssiger und pr?ziser. Beachten Sie jedoch, dass wir immer noch die H?heneigenschaft animieren.

Der offensichtliche Vorteil besteht darin, dass Sie die H?he dynamisch basierend auf dem tats?chlichen Inhalt des Elements festlegen und so sicherstellen, dass der übergang der tats?chlichen H?he entspricht, anstatt mit der maximalen H?he zu raten.

So k?nnen Sie es machen:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

In diesem Beispiel erweitern wir einen Abschnitt, der mit einer H?he von 0 beginnt. Wir verwenden scrollHeight, um die volle H?he des Inhalts zu erfassen und diesen als Endpunkt für den übergang zu verwenden. Nachdem der übergang abgeschlossen ist, stellen wir die H?he auf ?Auto“ um, sodass der Browser die H?he des Containers basierend auf seinem Inhalt automatisch anpassen kann. Dieser Schritt ist optional, aber nützlich, wenn Sie damit rechnen, dass sich der Inhalt im Container im Laufe der Zeit ?ndert.

Neue CSS-Funktionen zum Animieren von Anzeige- und intrinsischen Gr??eneigenschaften

Schauen wir uns nun die neuen CSS-Funktionen an, die kürzlich eingeführt wurden oder auf dem Weg zu Browsern sind. Diese neuen Tools machen JavaScript in den zuvor besprochenen Szenarien überflüssig und helfen Ihnen, saubereres, kürzeres CSS zu schreiben.

Anzeige und Keyframes

Mit der @keyframes at-Regel k?nnen Sie Animationen erstellen, indem Sie die Zwischenschritte in einer Animationssequenz steuern. Mit dem neuesten Update k?nnen Sie die Anzeige- und [content-visibility](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/)-Eigenschaften innerhalb einer Keyframe-Zeitleiste animieren.

Wir interpolieren nicht genau zwischen display none und block (weil das nicht m?glich ist). Stattdessen warten wir, bis alle anderen Effekte abgeschlossen sind, und wechseln dann den Anzeigestatus. Dies ?hnelt dem, was wir mit JavaScript gemacht haben – wir warten, bis der übergang abgeschlossen ist, bevor wir display:none anwenden –, aber jetzt ist es mit CSS viel einfacher.

Der Chrome Dev Blog hat eine wirklich coole Demo, die die Dinge klar macht:

Sehen Sie sich die Stift-Ausblendkarten an – Animation von web.dev (@web-dot-dev) auf CodePen.

Zuerst wird die Deckkraft über 250 ms auf 0 gesetzt. Sobald diese Sequenz abgeschlossen ist, wird die Anzeige sofort auf ?Keine“ gesetzt:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Der gr??te Vorteil hierbei ist, dass komplexere Animationen mit der Anzeigeeigenschaft, die bis vor Kurzem mit CSS (oder JavaScript) nur sehr schwer zu implementieren waren, jetzt relativ einfach erstellt werden k?nnen.

Wie das übergangsverhalten Anzeigeüberg?nge vereinfacht

Der Ausblendeffekt kann jetzt auch mit einem übergang mithilfe der neuen Eigenschaft [transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) erstellt werden . Dadurch k?nnen Sie überg?nge auf Eigenschaften anwenden, die ein diskretes Animationsverhalten haben, wie z. B. die Anzeige. Durch die Verwendung von ?allow-discrete“ k?nnen Sie die Anzeigeeigenschaft animieren. Hier ist ein kurzes Beispiel:

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.collapsible.open {
  max-height: 500px;
} 

Einstiegsanimationen mit @starting-style

Wir haben den Fade-Out-Effekt in diesem Artikel ausführlich besprochen. Aber wie w?re es im umgekehrten Fall? Eingabeanimationen sind knifflig und oft nur über JavaScript m?glich. Die neue @starting-style at-rule macht die Sache viel einfacher.

Wie der Name schon sagt, k?nnen wir damit einen Stil auf ein Element anwenden, den der Browser nachschlagen kann, bevor das Element auf der Seite sichtbar ist. Hier k?nnen wir den Anfangszustand einer Eintrittsanimation festlegen. Sobald das Element gerendert wird, kehrt es in seinen Standardzustand zurück.

Hier ist ein einfaches Beispiel:

document.getElementById("fadeButton").addEventListener("click", function () {
  const element = document.getElementById("myElement");
  element.style.opacity = "0";
  setTimeout(() => {
    element.style.display = "none";
  }, 1000); // Match this value with the duration in CSS
});

Die Karte wird eingeblendet, sobald das DOM geladen wird. Sie k?nnen @starting-style für alle Arten von Eintrittsanimationen verwenden. Hier ist ein weiteres tolles Beispiel vom Chrome Dev-Team:

_Sehen Sie sich die Stiftelementüberg?nge von web.dev (@web-dot-dev) auf CodePen an.
_

Animieren intrinsischer Gr??en mit der Funktion calc-size()?

Die calc-size-Funktion, ?hnlich calc(), wurde kürzlich in Chrome 129 eingeführt. Vereinfacht gesagt erm?glicht sie die sichere und zuverl?ssige Berechnung intrinsischer Gr??en. Es unterstützt derzeit Operationen mit vier Schlüsselw?rtern: Auto, Min-Content, Max-Content und Fit-Content.

Dies ist besonders nützlich, um Elemente auf und von ihrer eigentlichen Gr??e zu animieren. calc-size erm?glicht das Animieren jeder H?he, die derzeit in CSS angegeben werden kann, auf Null oder auf/von einem kleinen festen Wert. Hier ist ein einfaches Beispiel für die Erweiterung eines zusammenklappbaren Abschnitts von height: 0 auf auto:

li {
  height: 50px; /* any measurable value, not "auto" */
  opacity: 1;
  transition: height 0ms 0ms, opacity 400ms 0ms;
}
.fade-out {
  overflow: hidden; /* Hide the element content, while height = 0 */
  height: 0;
  opacity: 0;
  padding: 0;
  transition: height 0ms 400ms, padding 0ms 400ms, opacity 400ms 0ms;
}

Browserkompatibilit?t

Die meisten dieser Funktionen dienen in erster Linie der Verbesserung von Animationen und sind keine wesentlichen DOM-Komponenten. Da sie jedoch relativ neu sind, lohnt es sich dennoch, die Browserkompatibilit?t zu überprüfen:

• Die Anzeigeeigenschaft ist @keyframe animierbar in Chrome 116 und Opera 102. Die Firefox-Unterstützung befindet sich noch in der Entwicklung und Safari arbeitet daran
• Die Eigenschaft [transition-behavior](https://caniuse.com/mdn-css_properties_transition-behavior) wurde erstmals in Chrome 117 ver?ffentlicht. Sie ist mit allen g?ngigen Browsern kompatibel, au?er Firefox, wo sie sich derzeit in der Entwicklung befindet
• Die at-rule [@starting-style](https://caniuse.com/mdn-css_at-rules_starting-style) wurde in Chrome 117 eingeführt. Sie wird von allen g?ngigen Browsern au?er Firefox, wo dies der Fall ist, vollst?ndig unterstützt Animation aus dem Display wird noch nicht unterstützt: keine
• calc-size() ist die neueste Funktion, die in Chrome 129 eingeführt wurde und derzeit nur in Chrome und Edge unterstützt wird. Andere gro?e Browser werden es jedoch bald unterstützen

Abschluss

In diesem Artikel haben wir die Herausforderungen untersucht, denen Entwickler bei der Animation von CSS-Eigenschaften wie Anzeige- und Elementgr??en gegenüberstehen. Herk?mmliche Methoden erforderten komplexe Workarounds mit CSS und JavaScript, um Animationen für Eigenschaften zu erzielen, die nicht direkt animiert werden k?nnen.

Neue Funktionen wie die Animation der Anzeige mit Keyframes, die Funktion calc-size() und die Eigenschaft ?transition-behavior“ erleichtern die Umsetzung dieser Animationen. Diese Funktionen machen JavaScript überflüssig und erm?glichen einfachere CSS-Animationen.

Belastet Ihr Frontend die CPU Ihrer Benutzer?

Da Web-Frontends immer komplexer werden, fordern ressourcenintensive Funktionen immer mehr vom Browser. Wenn Sie daran interessiert sind, die clientseitige CPU-Nutzung, Speichernutzung und mehr für alle Ihre Benutzer in der Produktion zu überwachen und zu verfolgen, probieren Sie LogRocket aus.

LogRocket ist wie ein DVR für Web- und mobile Apps und zeichnet alles auf, was in Ihrer Web-App, mobilen App oder Website passiert. Anstatt zu erraten, warum Probleme auftreten, k?nnen Sie wichtige Frontend-Leistungsmetriken zusammenfassen und darüber berichten, Benutzersitzungen zusammen mit dem Anwendungsstatus wiedergeben, Netzwerkanfragen protokollieren und alle Fehler automatisch aufdecken.

Modernisieren Sie die Art und Weise, wie Sie Web- und mobile Apps debuggen – beginnen Sie mit der kostenlosen überwachung.

Das obige ist der detaillierte Inhalt vonVereinfachen Sie CSS-Animationen mit den Anzeige- und Gr??eneigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!