理解 Animation.commitStyles 的行为与动画样式持久化

理解 Animation.commitStyles 的作用边界

在使用 Web Animations API 进行动画开发时，Animation.commitStyles() 方法旨在将动画在当前时间点计算出的样式值应用到元素的内联样式上。然而，许多开发者会遇到一个常见问题：在动画完全结束后调用 commitStyles() 似乎没有任何效果，元素会立即恢复到动画前的初始状态。

这背后的原因是 Web Animations API 中动画的默认行为。当一个 Animation 对象创建时，其 fill 属性默认为 "none"。这意味着一旦动画播放完毕，或者动画被移除，元素将立即返回到动画开始前的原始样式状态。在这种情况下，即使在动画的 finished Promise 链中调用 commitStyles()，动画本身已经不再影响元素的样式，因此 commitStyles() 实际上没有可“提交”的动画样式，元素自然保持其初始状态。

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

<div id="target">我能移动</div>
<button>移动它</button>

document.querySelector("button").addEventListener("click", function(evt) {
  var a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  // 动画结束后，由于 fill 默认为 "none"，元素已恢复初始样式
  // 此时 commitStyles() 无法提交任何动画样式
  a.finished.then(() => a.commitStyles());
});

点击按钮后，target 元素会移动，但在 1 秒后，它会立即跳回原位，commitStyles() 并没有将 transform: 'translateX(400px)' 应用到元素的内联样式上。

实现动画结束样式持久化的正确姿势

要使动画结束时的样式得以保留，关键在于改变动画的 fill 属性。将 fill 设置为 "forwards" 可以指示浏览器在动画结束后，元素应保持动画的最终样式。

然而，仅仅设置 fill: "forwards" 并非最佳实践。虽然它能保留样式，但浏览器会持续维护这个动画，占用资源。更重要的是，通过 fill: "forwards" 保留的样式是由动画系统管理的，直接通过 CSS 或 JavaScript 修改这些样式可能会变得困难或产生冲突。

因此，最佳实践是结合 fill: "forwards"、commitStyles() 和 cancel() 来实现样式持久化：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

1. 设置 fill: "forwards"： 确保动画结束后元素能保持最终样式。
2. 在 finished Promise 中调用 commitStyles()： 这会将动画在结束时的最终样式计算出来，并作为内联样式应用到元素上。
3. 立即调用 cancel()： 一旦样式被 commitStyles() 应用，动画对象本身就不再需要了。cancel() 方法会停止动画并释放其占用的资源，同时由于样式已经被提交，元素的视觉效果不会改变。

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

<div id="target">我能移动</div>
<button>移动它</button>

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

通过这种方法，target 元素在完成 400px 的平移后，会停留在该位置，并且其内联样式会被更新为 transform: translateX(400px)。此后，你可以通过常规的 CSS 或 JavaScript 轻松修改这个元素的样式。

注意事项与最佳实践

• 资源管理： 仅仅依赖 fill: "forwards" 而不 cancel() 动画会导致浏览器持续维护动画状态，尤其是在大量动画场景下，可能影响性能。commitStyles() 和 cancel() 的组合是更高效的解决方案。

• 样式修改： 通过 fill: "forwards" 保留的样式，其优先级高于常规的 CSS 规则，有时甚至难以通过 JavaScript 修改。将样式提交为内联样式后，它们就变成了普通的内联样式，可以被后续的 CSS 或 JavaScript 覆盖。

• commitStyles() 何时有效？ commitStyles() 在动画 正在进行 且动画样式仍然活跃时是有效的。例如，如果在动画结束前（如通过 setTimeout 模拟）调用 commitStyles()，即使 fill 为 "none"，它也能将当时的动画样式提交。但这通常不是我们追求的动画结束样式持久化的目标，且这种做法可能导致样式在动画结束后仍被动画系统覆盖，不推荐用于样式持久化。

  // 这是一个反例，不推荐用于样式持久化
  document.querySelector("button").addEventListener("click", evt => {
    const anim = document.getElementById("target").animate([{
      transform: 'translateX(400px)'
    }], 1000);
    // 在动画结束前调用 commitStyles，此时动画样式仍活跃
    // 但动画结束后，元素仍会跳回原位，因为 fill 仍是 "none"
    setTimeout(() => anim.commitStyles(), 950);
  });

  登录后复制

总结

要正确地利用 Animation.commitStyles() 实现动画结束时的样式持久化，核心在于理解动画的 fill 属性。通过将 fill 设置为 "forwards"，并在动画完成后结合 commitStyles() 将样式固化为内联样式，然后 cancel() 动画以释放资源，我们能够构建出既符合预期、又高效且易于维护的 Web 动画效果。这种方法确保了动画的最终状态以标准 CSS 形式保留，便于后续的样式管理。

以上就是理解 Animation.commitStyles 的行为与动画样式持久化的详细内容，更多请关注php中文网其它相关文章！