Kommer att förändras - CSS-tricks

Den will-changeegendom i CSS optimerar animeringar genom att låta webbläsaren vet vilka egenskaper och inslag är på väg att manipuleras och därigenom öka prestandan hos den speciella operation.

Den här egenskapen har fyra värden:

auto: standard webbläsaroptimeringar kommer att tillämpas.
scroll-position: indikerar att elementets rullningsposition kommer att animeras någon gång inom en snar framtid så att webbläsaren förbereder sig för innehåll som inte syns i ett elements rullningsfönster.
contents: innehållet i ett element förväntas förändras så att webbläsaren inte cachar innehållet i detta element.
: vilken användardefinierad egendom som transformeller opacitysom vi vill will-changeska tillämpas på.

Vi kan informera webbläsaren om att en förändring håller på att äga rum på transformfastigheten så:

.element ( will-change: transform; )

Eller om vi vill deklarera flera värden kan vi använda en kommaseparerad lista som:

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

Det är dock viktigt att inte överanvända will-changefastigheten eftersom den faktiskt kan leda till att sidan blir mindre prestanda (notera att det inte finns något allvärde för den här egenskapen av goda skäl). Som ett resultat rekommenderar MDN att egenskapen används som en sista utväg för befintliga prestandaproblem snarare än sådana som du förväntar dig skulle kunna hända. Och när du använder det rekommenderas det att du växlar will-changestrax innan ett element eller en egendom ändras och sedan stänger av det igen strax efter att processen är klar.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.