Главная » Языки программирования

Css will change example

Содержание
  1. CSS will-change Property
  2. Proper usage of the will-change property:
  3. Syntax
  4. Example of the will-change property:
  5. Values
  6. Browser support
  7. will — change
  8. Кратко
  9. Пример
  10. Значения
  11. Подсказки
  12. На практике
  13. Ксения Мадей советует

CSS will-change Property

The will-change property gives a hint to the browsers how an element is expected to change in the near future. Optimizations should be set up before an element is changed.

The will-change property was first named will-animate.

The will-change property allows browsers to change an element’s scroll position, contents or more than one CSS property values. However, many properties will not have any effect.

The values must be comma-separated. The will-change property can have the following values: unset, initial, inherit, will-change, auto, scroll-position, or contents.

This property should be used with caution. Different browsers use this property differently and overusing it may ignore the property.

Proper usage of the will-change property:

  • The will-change property should not be applied to too many elements. Its overuse can slow down the page load speed. In such a case, a lot of resources can be consumed.
  • When using the will-change property it’s better to use script code before and after the change occurs.
  • The will-change property should not be applied to elements to make a premature optimization. There isn’t any need to add will-change to elements if a page is performing well. This property is expected to be used as a last option for handling the existing problems of performance.
  • The browser should be given some time for optimizations. The will-change property is intended to inform about the properties that are expected to change ahead of time.
  • The will-change property can affect an element’s visual display when it is used with values creating a stacking context.
Читайте также:  Html код кнопки ютуба

Syntax

will-change: auto | scroll-position | contents | | initial | inherit;

Example of the will-change property:

html> html> head> title>The title of the document title> style> .circle < width: 50px; height: 50px; transform: translate(50px, 0px); border-radius: 30px; > .circle.blue < background: #1c87c9; will-change: transform; > .circle.green < background: #8ebf42; > style> head> body> h2>Will-change property example h2> div class="circle green"> div> div class="circle blue"> div> div class="circle green"> div> div class="circle blue"> div> div class="circle green"> div> script> var circles = document.getElementsByClassName("circle blue"); function update(t) < for (var i = 0; i < circles.length; i++) < var xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50; circles[i].style.transform = "translate(" + xpos + "px, 0px)"; > window.requestAnimationFrame(update); > update(); script> body> html>

Values

Value Description
auto Standard browser optimization should be applied.
scroll-position Specifies that the element’s scroll position will be animated in the future.
contents Specifies that the element’s content will be animated in the future.
Expected to change or animate the property with the given name on the element in the near future.If the property is shorthand the changes will expand to all the longhand properties.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

Источник

will — change

Заранее сообщаем браузеру, какие свойства у элементов будут меняться.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство will — change позволяет заранее сообщить браузеру об изменениях (анимация, перемещение и т.д), которые могут произойти с элементом. Так браузер успеет оптимизировать выполнение этих изменений до того, как они произойдут. Это повышает скорость работы сайта.

Пример

Скопировать ссылку «Пример» Скопировано

Чтобы включить will — change , нужно добавить следующее правило для элемента, который будет изменяться:

 div  will-change: /* значение */;> div  will-change: /* значение */; >

Значения

Скопировать ссылку «Значения» Скопировано

Свойство will — change принимает одно из четырёх возможных значений:

  • auto — не указывает никакого конкретного свойства, браузер будет работать как обычно. Значение по умолчанию.
  • scroll — position — указывает, что ожидается изменение положения элемента при прокрутке страницы. Браузер заранее готовится и отрисовывает содержимое за пределами видимой части страницы.
  • contents — указывает, что ожидается изменение содержимого элемента. Браузер ограничивает или полностью прекращает кэширование элемента и отрисовывает его с нуля при каждом изменении его содержимого.
  • меняющееся свойство — имя свойства, которое будет изменяться (transform, opacity и т.д). Несколько свойств разделяются запятыми.
 div  will-change: transform; will-change: opacity; will-change: top, left, bottom, right;> div  will-change: transform; will-change: opacity; will-change: top, left, bottom, right; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Не стоит использовать will — change для большого числа элементов. Браузер и так пытается максимально оптимизировать работу страницы. Если заставить его отслеживать все возможные изменения элементов, это вызовет большой расход ресурсов и может замедлить работу сайта.

💡 will — change используется как крайнее средство, если есть видимые задержки в работе сайта.

На практике

Скопировать ссылку «На практике» Скопировано

Ксения Мадей советует

Скопировать ссылку «Ксения Мадей советует» Скопировано

🛠 will — change необходимо включить до изменения состояния элемента. Если применить это свойство в процессе изменения состояния, оно не успеет сработать и не даст никакого эффекта.

 /* Изменение элемента происхожит при наведении курсора */.element:hover  /* нужно подготовиться к изменению, которое уже происходит, код не сработает */ will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5);> /* Изменение элемента происхожит при наведении курсора */ .element:hover  /* нужно подготовиться к изменению, которое уже происходит, код не сработает */ will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5); >

Если изменение элемента происходит при клике на него, will — change можно включать при наведении курсора на элемент. Это даёт браузеру время подготовиться до того, как произойдёт изменение .

 .element  /* правила */ transition: transform 1s ease-out;> .element:hover  /* браузер начинает готовиться к изменению состояния */ will-change: transform;> .element:active  /* происходит изменение состояния */ transform: rotateY(180deg);> .element  /* правила */ transition: transform 1s ease-out; > .element:hover  /* браузер начинает готовиться к изменению состояния */ will-change: transform; > .element:active  /* происходит изменение состояния */ transform: rotateY(180deg); >

Если изменение происходит при наведении курсора на элемент, то можно включать will — change при наведении на родительский элемент:

 .element  transition: opacity 0.3s linear;> /* включаем will-change для элемента, когда мышка наводится на его родительский элемент */.parent:hover .element  will-change: opacity;> /* применение изменения, когда мышка наведена на элемент */.element:hover  opacity: 0.5;> .element  transition: opacity 0.3s linear; > /* включаем will-change для элемента, когда мышка наводится на его родительский элемент */ .parent:hover .element  will-change: opacity; > /* применение изменения, когда мышка наведена на элемент */ .element:hover  opacity: 0.5; >

🛠 Рекомендуется отключать will — change сразу после того, как закончится изменение элемента. Поэтому лучше назначать это свойство через JavaScript. Если назначить его через CSS, его невозможно будет убрать после выполнения изменения и оно будет продолжать расходовать ресурсы.

Пример назначения через JS:

 // Получаем доступ к элементу, который будет изменяться при клике по немуconst el = document.getElementById('element') // Включаем will-change при наведении курсора на элементel.addEventListener('mouseenter', hintBrowser)el.addEventListener('animationEnd', removeHint) function hintBrowser()  // Свойства, которые будут изменяться в блоке // описания анимации и которые можно заранее оптимизировать this.style.willChange = 'transform, opacity'> // Для отключения свойства устанавливаем ему значение по умолчаниюfunction removeHint()  this.style.willChange = 'auto'> // Получаем доступ к элементу, который будет изменяться при клике по нему const el = document.getElementById('element') // Включаем will-change при наведении курсора на элемент el.addEventListener('mouseenter', hintBrowser) el.addEventListener('animationEnd', removeHint) function hintBrowser()  // Свойства, которые будут изменяться в блоке // описания анимации и которые можно заранее оптимизировать this.style.willChange = 'transform, opacity' > // Для отключения свойства устанавливаем ему значение по умолчанию function removeHint()  this.style.willChange = 'auto' >

Иногда will — change допускается назначать через CSS. Это относится к часто используемым элементам (например, анимация кнопки или сайдбара) и к изменениям, которые происходят на странице постоянно (например, анимация, которая происходит при движении курсора мышки).

В остальных случаях will — change лучше назначать через JS и отключать после завершения изменения элемента.

Источник

Оцените статью
© 2024 Программирование