Vil-ændre - CSS-tricks | CSS Almanak 2025

Den will-changeejendom i CSS optimerer animationer ved at lade browseren vide, hvilke egenskaber og elementer er lige ved at blive manipuleret, potentielt kan øge effektiviteten af den pågældende operation.

Denne egenskab har fire værdier:

auto: standard browseroptimeringer anvendes.
scroll-position: angiver, at elementets rulleposition vil blive animeret engang i den nærmeste fremtid, så browseren forbereder sig på indhold, som ikke er synligt i et elementes rullevindue.
contents: indholdet af et element forventes at ændre sig, så browseren ikke cacher dette elementets indhold.
: enhver brugerdefineret egenskab, som transformeller opacitysom vi vil will-changeblive anvendt på.

Vi kan informere browseren om, at en ændring er ved at finde sted på transformejendommen sådan:

.element ( will-change: transform; )

Eller hvis vi vil erklære flere værdier, kan vi bruge en komma-adskilt liste som:

.element ( will-change: transform, opacity; )

Det er vigtigt ikke at overforbruge will-changeejendommen, da det faktisk kan medføre, at siden er mindre performant (bemærk, at der ikke er en allværdi for denne ejendom af en god grund). Som et resultat anbefaler MDN, at ejendommen bruges som en sidste udvej for eksisterende præstationsproblemer snarere end dem, du forventer kunne ske. Og når du bruger det, anbefales det at skifte will-changelige før et element eller en ejendom ændres og derefter slå det fra igen kort efter, at processen er afsluttet.