will-changeNieruchomość w CSS optymalizuje animacje pozwalając know przeglądarki, które właściwości i elementy są po prostu ma być manipulowane, potencjalnie zwiększając skuteczność danej operacji.
Ta właściwość ma cztery wartości:
auto: zostaną zastosowane standardowe optymalizacje przeglądarki.scroll-position: wskazuje, że pozycja przewijania elementu będzie animowana w najbliższej przyszłości, więc przeglądarka przygotuje się na zawartość, która nie jest widoczna w oknie przewijania elementu.contents: zawartość elementu powinna się zmienić, więc przeglądarka nie będzie buforować zawartości tego elementu.: dowolna właściwość zdefiniowana przez użytkownika, taka jaktransformlubopacity, do której chcemywill-changezastosować.
Możemy poinformować przeglądarkę, że za chwilę nastąpi zmiana w transformobiekcie:
.element ( will-change: transform; )Lub jeśli chcemy zadeklarować wiele wartości, możemy użyć listy oddzielonej przecinkami, takiej jak:
.element ( will-change: transform, opacity; )Ważne jest jednak, aby nie nadużywać tej will-changewłaściwości, ponieważ w rzeczywistości może to spowodować mniejszą wydajność strony (pamiętaj, że nie ma allwartości dla tej właściwości z dobrego powodu). W rezultacie MDN zaleca używanie tej właściwości jako ostateczności w przypadku istniejących problemów z wydajnością, a nie tych, które można przewidzieć. Podczas korzystania z niego zaleca się przełączenie will-changetuż przed zmianą elementu lub właściwości, a następnie ponowne wyłączenie wkrótce po zakończeniu procesu.
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 36 | 36 | Nie | 79 | 9.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.3 |