JS Web Animations API动画结束后无法重置HTML元素样式的问题

我用JS Web Animations API给页面里的几个字母元素做了旋转动画，动画结束后想通过CSS重置这些元素的样式，但怎么都不生效。怀疑是动画没正确结束，导致样式被锁住了。

动画实现代码 #

for (letters of letter)
{
        let animation2 = letter.animate([
            {transform: `rotate(${letterCurrentRotation}deg)`},
            {transform: `rotate(${nearestAngle}deg)`}
            ],
            {
                fill: "forwards",
                duration: 1000,
                iterations: 1
            });
        
        animation2.addEventListener("finish", () => {
        animation2.commitStyles();
        console.log(`animation ${animCounter} finished. animation playstate: ${animation2.playState}. Letter ${letters[animCounter].innerHTML}`)
        animCounter++;
        if (animCounter >= letters.length)
        {
            animCounter = 0
        }
        animation2.cancel();
        })
}

控制台输出 #

animation 0 finished. animation playstate: finished. Letter A
 animation 1 finished. animation playstate: idle. Letter R
 animation 2 finished. animation playstate: idle. Letter P
 animation 3 finished. animation playstate: idle. Letter H

document.getAnimations()输出 #

(3) [Animation, Animation, Animation]
0: Animation {effect: KeyframeEffect, startTime: 1684.7069999203086, currentTime: 1000, playbackRate: 1, playState: 'finished', …}
1: Animation {effect: KeyframeEffect, startTime: 1684.7069999203086, currentTime: 1000, playbackRate: 1, playState: 'finished', …}
2: Animation {effect: KeyframeEffect, startTime: 1684.7069999203086, currentTime: 1000, playbackRate: 1, playState: 'finished', …}
length: 3
[[Prototype]]: Array(0)

疑问 #

• 我的理解是否正确：调用了cancel()方法的动画不应被document.getAnimations()列出？
• 为何触发了finish事件的动画仍会被document.getAnimations()列出？
• 为何动画在触发finish事件后仍存在，进而导致无法重置元素样式？

解答 #

1. 关于cancel()与document.getAnimations()的理解

不对。调用cancel()只是终止动画并清除它对元素的实时样式影响，但动画对象本身并不会立刻从文档的动画列表中消失——只要代码里还有引用指向这个动画对象，它就会出现在document.getAnimations()的结果里，只是状态会变为idle。只有当动画对象被垃圾回收机制清理后，才会从列表中移除。

2. 触发finish事件的动画仍被列出的原因

finish事件触发仅代表动画完成了所有迭代、到达了结束状态，但动画对象本身不会自动销毁。默认情况下，即使动画结束，只要没有主动销毁或失去所有引用，它就会继续存在于文档的动画列表中。另外你设置的fill: "forwards"只是让动画结束后保留最终样式，和动画对象的存在状态无关。

3. 无法重置样式的原因

动画对象存在本身不会导致样式无法修改，问题出在你的代码逻辑和样式优先级上：

• 首先，循环变量名错误：for (letters of letter)应该是for (letter of letters)，这可能导致动画绑定或处理逻辑出错。
• 其次，finish回调里先调用commitStyles()提交动画样式，紧接着调用cancel()——cancel()会清除动画对元素的样式覆盖，可能抵消了commitStyles()的效果；同时，Web Animations API的动画样式优先级高于普通CSS，即使动画结束，fill: "forwards"生效时，动画的最终样式会覆盖你的CSS规则。
• 另外，控制台输出里第一个动画的playState是finished，而后续是idle，说明第一个动画的cancel()可能没正确执行，可能和animCounter的全局变量作用域有关，回调触发时animCounter已经变化，导致处理逻辑混乱。

修复建议 #

1. 修正循环变量：改成for (const letter of letters)，用const保证块级作用域的变量独立性。
2. 调整回调逻辑：去掉finish里的cancel()，因为fill: "forwards"已经会保留动画最终样式，commitStyles()提交后无需再取消动画；如果需要重置样式，在动画结束后手动设置元素的transform为初始值，再调用cancel()移除动画的样式覆盖。
3. 提高CSS优先级：如果要让CSS覆盖动画样式，可以使用更具体的选择器，或者临时添加!important（不推荐长期使用），确保CSS规则优先级高于动画样式。

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