33 lines
3.0 KiB
Markdown
33 lines
3.0 KiB
Markdown
---
|
||
title: Will Change
|
||
localeTitle: Изменится
|
||
---
|
||
## Изменится
|
||
|
||
Свойство will-change позволяет вам сообщить браузеру, какие манипуляции будут происходить с элементом, чтобы его оптимизировать.
|
||
|
||
```css
|
||
.container {
|
||
will-change: transform;
|
||
}
|
||
```
|
||
|
||
Вышеуказанное свойство будет изменено для класса `.container` , в этом случае преобразование элемента может или не может произойти.
|
||
|
||
Однако, используя это свойство, есть интересный побочный эффект.
|
||
|
||
Если мы применим к элементу transform: `translateZ (0)` , элемент создаст новый контекст оверлея, а в некоторых браузерах он также добавит слой к собственному потоку рендеринга, что даст нам повышение производительности, которое мы достигаем ,
|
||
|
||
Следовательно, использование `will-change: transform` , браузер создаст новый оверлейный контекст, независимо от того, применяем ли мы преобразование к элементу или нет.
|
||
|
||
Главное отметить, что will-change создаст новый оверлейный контекст, только если свойство также создаст новый оверлейный контекст. Поскольку свойство transform создает новый оверлейный контекст, `will-change: transform` также создаст новый оверлейный контекст.
|
||
|
||
Если вы используете `will-change: display` , то новый контекст оверлея не будет создан, так как никакое значение свойства display не создает новый оверлейный контекст.
|
||
|
||
Давайте посмотрим на другой пример: `opacity` . Непрозрачность со значением 1 не создает новый оверлейный контекст, но с более низким значением (например, 0,9). Хотя будет изменяться: непрозрачность в любом случае создаст новый оверлейный контекст.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [изменится на веб-документы MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)
|
||
* [CSS изменит модуль уровня 1 (рабочий проект)](https://drafts.csswg.org/css-will-change/#will-change)
|
||
* [Могу ли я использовать: CSS будет изменять свойство](https://caniuse.com/#feat=will-change) |