动画：commitStyles() 方法

基线 广泛可用

此功能已经成熟，可以在许多设备和浏览器版本上运行。 它自 2020 年 3 月.

commitStyles() 是 Web 动画 API 的 Animation 接口的一种方法，它将动画当前样式的 计算值 写入其目标元素的 style 属性中。 即使动画已被 自动删除，commitStyles() 仍然有效。

commitStyles() 可以与 fill 结合使用，以使动画的最终状态在动画结束之后持续存在。 同样的效果可以通过 fill 单独实现，但是 不建议使用无限填充动画。 动画 优先于所有静态样式，因此无限填充动画会阻止目标元素永远正常地进行样式设置。

使用 commitStyles() 将样式状态写入元素的 style 属性中，在那里可以像往常一样修改和替换这些状态。

语法

js
commitStyles()

参数

无。

返回值

无 (undefined)。

示例

提交动画的最终状态

在这个例子中，我们有两个按钮，分别标注为“提交样式”和“填充向前”。 两个按钮在点击时都会进行动画，并且都会保持动画的最终状态。

然而，不同之处在于，“填充向前”仅使用 fill: "forwards" 来保持动画的最终状态：这意味着浏览器必须无限期地维护动画的状态，或者直到它可以被自动删除为止。

然而，“提交样式”按钮会等待动画完成，然后调用 commitStyles()，然后取消动画，因此完成的样式被捕获为 style 属性的值，而不是动画状态。

HTML

html
<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>

JavaScript

js
const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});

结果

规范

规范
Web 动画
# dom-animation-commitstyles

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参见