DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die will-change Eigenschaft in CSS optimiert Animationen, indem sie dem Browser mitteilt, welche Eigenschaften und Elemente gerade manipuliert werden, was potenziell die Leistung dieses bestimmten Vorgangs erhöht.
Syntax
will-change: <animateable-feature> = scroll-position | contents | <custom-ident>- Anfangswert:
auto - Gilt für: alle Elemente
- Vererbt: nein
- Prozentwerte: n/v
- Berechneter Wert: spezifischer Wert
- Animationstyp: nicht animierbar
Werte
Diese Eigenschaft hat vier Werte
auto: Es werden Standard-Optimierungen des Browsers angewendet.scroll-position: Zeigt an, dass die Scroll-Position des Elements in naher Zukunft animiert wird, sodass der Browser Inhalte vorbereitet, die im Scrollfenster eines Elements nicht sichtbar sind.contents: Der Inhalt eines Elements wird voraussichtlich geändert, daher speichert der Browser den Inhalt dieses Elements nicht im Cache.<custom-ident>: Eine benutzerdefinierte Eigenschaft wietransformoderopacity, auf diewill-changeangewendet werden soll.
Verwendung der Eigenschaft
Wir können den Browser informieren, dass eine Änderung an der Eigenschaft transform bevorsteht, wie folgt:
.element {
will-change: transform;
}Oder, wenn wir mehrere Werte deklarieren möchten, können wir eine durch Kommas getrennte Liste verwenden, wie z. B.:
.element {
will-change: transform, opacity;
}Es ist wichtig, die Eigenschaft will-change nicht zu überstrapazieren, da sie die Seitenleistung tatsächlich verringern kann (beachten Sie, dass es aus gutem Grund keinen Wert all für diese Eigenschaft gibt). Daher empfiehlt MDN, die Eigenschaft als letzte Option für bestehende Leistungsprobleme zu verwenden, anstatt für solche, die Sie antizipieren.
Weitere Ressourcen
- Sara Soueidans detaillierter Leitfaden
will-changeauf MDNwill-changeauf W3C- „Was Ihnen niemand über will-change erzählt“ von Thierry Koblentz
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, wo weitere Details verfügbar sind. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 36 | 36 | Nein | 79 | 9.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 9.3 |
Spezifikation
will-change ist im Entwurf der Spezifikation CSS Will Change Module Level 1 definiert, der sich derzeit im Editor’s Draft-Status befindet. Das bedeutet, dass die hier und in der Spezifikation bereitgestellten Informationen geändert werden könnten, bevor sie eine Kandidatenempfehlung erreichen.
Danke, Kumpel; hilfreicher Artikel.
Gibt es also Hinweise darauf, dass dies immer noch eine Rolle spielt und die Leistung tatsächlich verbessert?
Es ist immer noch eine Sache, ich habe es ein paar Mal verwendet, um Probleme mit festen Hintergrundbildern zu beheben, die zu einem trägen Seitenaufbau führten, aber es ist eine sehr spezielle Sache, die selten benötigt wird. Sie verbessert die Leistung nur, wenn bereits ein Hauptproblem vorliegt.
Ich entwickle einige Animationen mit CSS, und es gibt einige Punkte, an denen mehrere davon gleichzeitig beginnen, was das Ganze nicht sehr flüssig macht. Ich suchte also nach etwas, das bei diesem Problem hilft, und landete auf diesem Artikel.
Ich habe versucht, diese Regel zu verwenden, aber leider scheint sie den Animationsfluss nicht zu verbessern.
Interessanterweise scheint Google zu empfehlen, dies mehr zu verwenden als die MDN-Dokumentation, und ihr Artikel dazu https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance bezeichnet es nicht als „letzte Option“. Das deutet darauf hin, dass es in Chrome möglicherweise hilfreicher ist.
Beachten Sie, dass die Mozilla-Dokumentation besagt: „Wichtig: will-change soll als letzte Option verwendet werden, um bestehende Leistungsprobleme zu beheben. Es sollte nicht zur Antizipation von Leistungsproblemen verwendet werden.“
Was ist mit
will-change: opacity, contents? Würde das funktionieren?Ja! Die durch Kommas getrennten Werte sind völlig legitim. Die Spezifikation enthält einige hervorragende Tipps zur Verwendung der Eigenschaft, darunter auch die Empfehlung, vorsichtig mit der Verwendung über zu viele Eigenschaften und Elemente hinweg zu sein.
Hallo zusammen!
Ich weiß, dass dieser Artikel etwas alt ist, aber hat jemand erlebt, dass das Element unter Chrome, wenn die Eigenschaft
will-changedarauf angewendet wird, etwas verschwommen wird?Versuchen Sie diese Lösung,
und
wir brauchen keine CSS für Änderungen?