Ще се промени - CSS-трикове

В will-changeимота в CSS оптимизира анимации, като оставите ноу браузър, който свойства и елементи са на път да бъдат манипулирани, потенциално повишаване на ефективността на тази конкретна операция.

Това свойство има четири стойности:

auto: ще бъдат приложени стандартни оптимизации на браузъра.
scroll-position: показва, че позицията за превъртане на елемента ще бъде анимирана в близко бъдеще, така че браузърът ще се подготви за съдържание, което не се вижда в прозореца за превъртане на елемент.
contents: съдържанието на елемент се очаква да се промени, така че браузърът няма да кешира съдържанието на този елемент.
: всяко дефинирано от потребителя свойство като transformили към opacityкоето искаме will-changeда бъде приложено.

Можем да информираме браузъра, че ще настъпи промяна в transformимота по следния начин:

.element ( will-change: transform; )

Или ако искаме да декларираме множество стойности, можем да използваме списък, разделен със запетая, като:

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

Важно е обаче да не се използва прекалено много will-changeсвойството, тъй като това всъщност може да доведе до по-ниска производителност на страницата (имайте предвид, че няма allстойност за това свойство по основателна причина). В резултат на това MDN препоръчва свойството да се използва в краен случай за съществуващи проблеми с производителността, а не за тези, които очаквате да се случат. И когато го използвате, се препоръчва да превключвате will-changeнепосредствено преди промяна на елемент или свойство и след това да го изключвате отново малко след като процесът приключи.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.