Akarat-változás - CSS-trükkök

A will-changeCSS-ben lévő tulajdonság optimalizálja az animációkat azáltal, hogy tudatja a böngészővel, mely tulajdonságokkal és elemekkel készül csak manipulálni, ami növelheti az adott művelet teljesítményét.

Ennek a tulajdonságnak négy értéke van:

auto: a böngésző szokásos optimalizálása kerül alkalmazásra.
scroll-position: azt jelzi, hogy az elem görgetési helye valamikor a közeljövőben animálódik, így a böngésző felkészül olyan tartalmakra, amelyek nem láthatók egy elem görgetőablakában.
contents: egy elem tartalma várhatóan megváltozik, így a böngésző nem tárolja az elem tartalmát gyorsítótárba.
: A felhasználó által megadott tulajdonság, például transform, vagy opacityhogy szeretnénk will-changealkalmazni kell.

Tájékoztathatjuk a böngészőt, hogy a következő változás következik be az transformingatlanban:

.element ( will-change: transform; )

Vagy ha több értéket akarunk deklarálni, vesszővel elválasztott listát használhatunk, például:

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

Fontos, hogy ne használja túlságosan az will-changeingatlant, mivel ez tulajdonképpen az oldal kevésbé lesz hatékonyabb (vegye figyelembe, hogy allennek a tulajdonságnak jó okból nincs értéke). Ennek eredményeként az MDN azt javasolja, hogy az ingatlant a meglévő teljesítményproblémák végső megoldásaként használják fel, nem pedig azokra, amelyekre Ön számít. Használatakor javasoljuk, hogy will-changeközvetlenül az elem vagy a tulajdonság megváltozása előtt váltson át, majd röviddel a folyamat befejezése után kapcsolja ki újra.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.