为何Animation.commitStyles在动画结束后无法保留样式？

问题出在两个核心点上：

1. 动画默认的fill模式与回调执行时机冲突 #

动画默认的fill值是none，这意味着动画完成后，浏览器会立即将元素样式恢复到初始状态。而你使用的finished.then()回调属于微任务，会在浏览器完成样式恢复的操作后才执行——此时调用commitStyles()，获取的是动画结束后的初始状态，而非动画的最终帧样式，自然看不到效果。

2. 单帧关键帧的识别问题（次要因素） #

虽然单帧关键帧会默认以元素当前样式作为起始状态，但部分浏览器在处理这种简化写法的动画结束状态时，可能无法正确识别需要提交的最终样式。

两种可行的解决方案 #

方案一：在onfinish事件中调用commitStyles() #

onfinish事件属于宏任务，会在动画刚完成、浏览器还未恢复元素初始样式时执行，能确保获取到正确的最终帧样式：

document.querySelector("button").addEventListener("click", function(evt) {
  const a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  a.onfinish = function() {
    this.commitStyles();
  };
});

方案二：临时设置fill: forwards后取消动画 #

通过fill: forwards让动画结束后暂时保持最终状态，确保commitStyles()能提取到目标样式，之后调用cancel()移除动画（避免动画实例长期占用资源）：

document.querySelector("button").addEventListener("click", function(evt) {
  const a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], {
    duration: 1000,
    fill: 'forwards'
  });
  a.finished.then(() => {
    a.commitStyles(); // 将最终样式固化为内联样式
    a.cancel(); // 移除动画，释放资源
  });
});

内容的提问来源于stack exchange，提问作者user21950483