通过Web Animations API应用的“意愿改变”是否会达到预期的效果？ 想法示例：

如何解决通过Web Animations API应用的“意愿改变”是否会达到预期的效果？ 想法示例：

According to Google:

一般的经验法则是，如果动画可能在接下来的200毫秒内触发 [...] ，那么对动画元素进行更改会是个好主意。在大多数情况下，无论您打算更改哪个属性，应用程序当前视图中要设置动画的任何元素都应启用will-change。

所以我的问题是，will-change是否可以在对任何属性进行实际动画处理之前通过Web动画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
    },opacity: 0.5,offset: 0.5,// 50% of the way through the animation
    },{ 
      willChange: 'initial',opacity: 'initial'
    },],1000
);

解决方法

是的，它将达到预期的效果。

动画会影响元素的计算样式，但是许多DevTools面板会显示元素的指定样式，因此为什么您在此处看不到它。

另一种方法是简单地向动画添加短暂的延迟。在动画的延迟阶段，要求浏览器应用will-change: opacity（或其他要动画的属性）。 （Spec reference）

也就是说，这样做真的没有优势。应用will-change的目的是让浏览器准备要进行动画处理的内容（例如，通过将其重新栅格化为单独的图层），以便动画开始时没有延迟。如果您只是正常启动动画，浏览器将根据需要重新光栅化，然后从头开始动画。

使用will-change的好处是，如果您知道之前，则需要开始动画要制作动画的元素，则可以让浏览器提前进行准备。

,

使用WAAPI（Web动画API）时，看来will-change实际上是完全不必要的。

---

如果您的动画制作有延迟，则无需担心会使用变更。 -Source

来自规范作者之一：

如果延迟时间为正值，则无需更改意愿，因为浏览器会在延迟开始时分层，并且在动画开始播放时就可以使用了。