Mainīsies - CSS-triki

Anonim

will-changeĪpašums CSS optimizē animācijas, ļaujot pārlūka zināt, kuras īpašības un elementi ir tikai par to manipulēt, iespējams, palielinot veiktspēju šo konkrēto darbību.

Šim īpašumam ir četras vērtības:

  • auto: Tiks piemērotas standarta pārlūkprogrammas optimizācijas.
  • scroll-position: norāda, ka elementa ritināšanas pozīcija tiks animēta kaut kad tuvākajā nākotnē, tāpēc pārlūks sagatavosies saturam, kas nav redzams elementa ritināšanas logā.
  • contents: Paredzams, ka elementa saturs mainīsies, tāpēc pārlūkprogramma nesaglabās kešatmiņā šī elementa saturu.
  • : jebkurš lietotāja definēts rekvizīts, piemēram, transformvai opacitykuru mēs vēlamies will-changeizmantot.

Mēs varam informēt pārlūku, ka transformīpašumā notiks izmaiņas, piemēram:

.element ( will-change: transform; )

Vai arī, ja mēs vēlamies deklarēt vairākas vērtības, mēs varam izmantot ar komatiem atdalītu sarakstu, piemēram:

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

Ir svarīgi will-changetomēr nepārspīlēt īpašumu, jo tas faktiski var izraisīt lapas mazāk veiktspēju (ņemiet vērā, ka allšim īpašumam nav iemesla laba iemesla dēļ). Rezultātā MDN iesaka īpašumu izmantot kā pēdējo līdzekli esošajām veiktspējas problēmām, nevis tām, kuras, pēc jūsu domām, varētu notikt. Lietojot to, ieteicams pārslēgties will-changetieši pirms elementa vai rekvizīta maiņas un pēc tam to atkal izslēgt neilgi pēc procesa beigām.

Pārlūkprogrammas atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
36 36 79 9.1

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. 9.3