Vereinfachen Sie CSS-Animationen mit den Anzeige- und Größeneigenschaften

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!