问题的改写:在Chrome中可以触发“animationcancel”事件,但在Firefox中无法正常触发,同时在CSS动画中使用“playState”属性会返回“Finished”状态。 由于Firefox不支持“animationcancel”事件,因此可以使用“animationend”事件代替。另外,在CSS动画中使用“animation-play-state”属性代替“playState”属性。
代码示例:
// 使用animationend事件代替animationcancel事件
element.addEventListener('animationend', function(event) {
if (event.animationName === 'example') {
// 动画已取消
}
});
// 使用animation-play-state属性代替playState属性
var animation = element.style.animation;
element.style.animationPlayState = 'paused';
if (animation.playState === 'running') {
// 动画正在运行中
} else if (animation.playState === 'paused') {
// 动画已被暂停
} else if (animation.playState === 'finished') {
// 动画已完成
}