Verlangsamt „transition: all' CSS3-Übergänge?

Behindert „Übergang: Alle“ die CSS3-Übergangsgeschwindigkeit?

Die Verwendung von CSS3-Übergängen bietet animierte Effekte für Webelemente. Eine gängige Praxis besteht darin, „transition: all“ zu verwenden, um alle Übergänge für mehrere Elemente einheitlich anzusprechen. Es gibt jedoch eine Debatte darüber, ob dieser Ansatz die Rendering-Leistung beeinträchtigt.

Anfrage: Könnte auf bestimmte Übergangseigenschaften für jedes Element abzielen (z. B. „Übergang: Deckkraft .2s Ease-In“). Führt dies zu schnelleren und flüssigeren Animationen im Vergleich zur Verwendung von „transition: all“?

Klarstellung: Funktioniert das? Verlangsamt die Suche der CSS-Engine nach „allen“ Übergangseigenschaften, auch nach Elementen mit einer einzelnen Eigenschaft, möglicherweise das Rendern?

Antwort:

Ja, mit „transition: all“. " kann erhebliche Leistungseinbußen haben. Der Browser führt möglicherweise unnötige Übergangsprüfungen durch, selbst wenn bestimmte Eigenschaften unverändert bleiben oder für den Benutzer unsichtbar bleiben (z. B. Farb- oder Dimensionsänderungen).

Demonstration:

Dieses Dabblet demonstriert das Problem: http://dabblet.com/gist/1657661. Durch Ändern der Zoomstufe oder der Schriftgröße werden Animationen auf allen Elementen ausgelöst, unabhängig davon, ob ein sichtbarer Übergang erforderlich ist.

Empfehlung:

Um die Leistung zu optimieren, vermeiden Sie die Verwendung von „Übergang“. : alle“ und entscheiden Sie sich für gezielte Übergänge (z. B. „Übergang: Marge .2s Ease-In“). Dadurch werden unnötige Überprüfungen eingeschränkt und das Risiko unerwünschter Animationen verringert.

Zusätzliche Überlegungen:

„Übergang: alle“ kann auch unerwünschte Effekte wie das „Spritzen“ von Animationen verursachen Beim Laden der Seite werden die ursprünglichen Stile gerendert, bevor Übergangseffekte angewendet werden. Gezielte Übergänge helfen, dieses Problem zu mildern.

Das obige ist der detaillierte Inhalt vonVerlangsamt „transition: all' CSS3-Übergänge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!