Web Animations API：持久化动画结束后的元素样式

理解 Animation.commitStyles() 的行为

animation.commitstyles() 方法旨在将动画的当前样式应用到元素的行内样式上，从而使其成为元素的永久样式。然而，开发者在使用此方法时常遇到一个困惑：在动画完成后调用 commitstyles()，元素却立即恢复到动画开始前的初始状态，似乎该方法并未生效。

其根本原因在于 Web Animations API 中动画的默认 fill 属性值为 "none"。当 fill 属性设置为 "none" 时，动画在播放结束后，元素会立即恢复到其动画前的原始样式状态。在这种情况下，即使在动画完成回调中调用 commitStyles()，由于动画的样式已经不再活跃，该方法实际上没有任何样式可以“提交”，因此元素会保持其原始样式。

考虑以下示例，它展示了 commitStyles() 在默认 fill 行为下的无效性：

document.querySelector("button").addEventListener("click", function(evt) {
  var a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  a.finished.then(() => a.commitStyles()); // 动画结束后调用，但元素会恢复原样
});

<div id="target">I can move</div>
<button>Move it</button>

在这个例子中，target 元素在动画结束后会立即跳回其初始位置，commitStyles() 似乎没有产生任何效果。

正确持久化动画样式的策略

为了确保动画结束后的样式能够被正确持久化，我们需要结合使用 fill: "forwards" 属性、commitStyles() 方法以及 cancel() 方法。

1. 使用 fill: "forwards" 属性

fill 属性用于控制动画在播放前和播放后的行为。当 fill 设置为 "forwards" 时，动画会在播放结束后保持其最终状态的样式，而不是恢复到原始样式。这是持久化动画样式的关键第一步。

2. 结合 commitStyles() 和 cancel()

仅仅设置 fill: "forwards" 可以让元素停留在动画的最终状态，但这种方式存在一些潜在的缺点：

天谱乐

唱鸭旗下AI音乐创作平台，为您提供个性化音乐创作体验！

514

查看详情

• 资源占用： 浏览器需要持续维护该动画实例，即使它已经播放完毕，这会占用额外的内存和计算资源。
• 样式覆盖： 通过 fill: "forwards" 保持的样式优先级较高，可能会使得后续通过 CSS 或 JavaScript 直接修改元素样式变得困难。

为了解决这些问题，最佳实践是在动画完成并停留在最终状态后，立即调用 commitStyles() 将动画的最终样式固化为元素的行内样式，然后调用 cancel() 方法来终止动画实例。cancel() 方法会停止动画，并释放其占用的资源，同时由于样式已经通过 commitStyles() 固化，元素将保持其最终状态。

以下是实现这一策略的推荐代码示例：

document.querySelector("button").addEventListener("click", evt => {
  document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], {
    duration: 1000,
    fill: "forwards" // 动画结束后保持最终状态
  }).finished.then(a => {
    a.commitStyles(); // 将动画的最终样式应用为行内样式
    a.cancel();       // 终止动画实例，释放资源
  });
});

<div id="target">I can move</div>
<button>Move it</button>

在这个改进的示例中，target 元素在动画结束后会平滑地停留在 translateX(400px) 的位置。commitStyles() 将此 transform 值写入元素的 style 属性中，而 cancel() 则确保动画对象被清理。

注意事项

• commitStyles() 的时机： commitStyles() 必须在动画处于其最终状态（即动画播放完毕且 fill: "forwards" 生效）时调用。如果在动画播放过程中调用，它会提交动画在该时间点上的当前样式。虽然这在某些特定场景下可能有用，但通常不是持久化动画最终状态的预期行为。
• 性能考量： 结合 fill: "forwards"、commitStyles() 和 cancel() 是在 Web Animations API 中持久化样式并优化性能的最佳实践。它既保证了样式的正确应用，又避免了不必要的资源消耗。

总结

Animation.commitStyles() 方法本身是有效的，但其效果受动画 fill 属性的影响。要成功持久化动画结束后的元素样式，关键在于将动画的 fill 属性设置为 "forwards"，并在动画完成时，先调用 commitStyles() 将最终样式固化，随后调用 cancel() 方法来清理动画实例，从而实现高效且可靠的样式持久化。这种方法不仅确保了动画效果的视觉一致性，也优化了浏览器资源的使用。

以上就是Web Animations API：持久化动画结束后的元素样式的详细内容，更多请关注php中文网其它相关文章！