Общее эмпирическое правило заключается в том, что если анимация может быть запущена в течение следующих 200 мс [...] то хорошей идеей будет использование will-change для анимации элементов. Для В большинстве случаев для любого элемента в текущем представлении вашего приложения, который вы собираетесь анимировать, должна быть включена функция will-change для любых свойств, которые вы планируете изменить.
Итак, мой вопрос: можно ли применить will-change
через API веб-анимации до того, как какое-либо свойство будет фактически анимировано, и будет ли это иметь желаемый эффект? Или слишком поздно в жизненном цикле того, что происходит за кулисами, чтобы will-change
работало должным образом?
Похоже, что свойства, измененные с помощью этого API, на самом деле не отражаются в DevTools как свойства CSS, поэтому я не могу проверить, действительно ли это вообще применяло will-change
.
Пример идеи:
this.animation = document.querySelector('#my-element').animate(
[
{
willChange: 'opacity', // will-change applied before any animated property has been changed
opacity: 'initial',
},
{
willChange: 'opacity',
opacity: 'initial',
offset: 0.01, // 1% of the way through the animation
},
{
willChange: 'opacity',
opacity: 0.5,
offset: 0.5, // 50% of the way through the animation
},
{
willChange: 'initial',
opacity: 'initial'
},
],
1000
);