will-changeCSS nuosavybė optimizuoja animacijos leisdami naršyklės žinoti, kuris savybės ir elementai yra tik apie būti manipuliuojama, potencialiai padidinti tos konkrečios operacijos efektyvumą.
Ši nuosavybė turi keturias vertes:
auto: bus taikomos standartinės naršyklės optimizacijos.scroll-position: rodo, kad artimiausiu metu elemento slinkties padėtis bus animuota, taigi naršyklė pasirengs turiniui, kurio nematyti elemento slinkties lange.contents: tikimasi, kad pasikeis elemento turinys, todėl naršyklė nesutalpins šio elemento turinio.: bet kokia vartotojo apibrėžta ypatybė, pvz.,transformarbaopacityta, kurią norimewill-changepritaikyti.
Mes galime informuoti naršyklę, kad netrukus bus atliktas toks transformnuosavybės pakeitimas:
.element ( will-change: transform; )Arba, jei norime deklaruoti kelias reikšmes, galime naudoti kableliais atskirtą sąrašą, pvz .:
.element ( will-change: transform, opacity; )Svarbu nepanaudoti will-changenuosavybės, tačiau dėl to iš tikrųjų puslapis gali būti mažiau našus (atkreipkite dėmesį, kad allši nuosavybė nėra vertinga dėl rimtos priežasties). Todėl MDN rekomenduoja turtą naudoti kaip paskutinę priemonę esamoms našumo problemoms spręsti, o ne toms, kurios, jūsų manymu, gali atsitikti. Kai jį naudojate, rekomenduojama perjungti will-changeprieš pat elemento ar ypatybės pasikeitimą, tada netrukus po proceso pabaigos jį vėl išjungti.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 36 | 36 | Ne | 79 | 9.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 9.3 |