如何用原生JavaScript检测Div元素的动画是否正在播放？

下面提供两种实用方案，实现你需要的「判断元素动画是否进行」的功能：

方案1：利用现代浏览器API直接检测 #

通过Element.getAnimations()获取元素上的所有动画，再判断是否有处于运行状态的动画：

function isAnimationInProgress(element) {
  // 获取元素关联的所有CSS动画、过渡
  const animations = element.getAnimations();
  // 检查是否存在正在运行的动画
  return animations.some(anim => anim.playState === 'running');
}

使用示例 #

let div_with_anim = document.getElementById("div_with_anim");
if (isAnimationInProgress(div_with_anim)) {
  // 动画正在进行时执行的逻辑
  console.log("动画正在运行");
}

方案2：事件监听标记状态（兼容旧浏览器） #

如果需要兼容不支持getAnimations()的旧浏览器，可以通过监听动画相关事件，维护一个状态变量：

function setupAnimationTracking(element) {
  // 初始化状态
  element.isAnimating = false;

  // 监听CSS动画事件
  element.addEventListener('animationstart', () => element.isAnimating = true);
  element.addEventListener('animationend', () => element.isAnimating = false);
  element.addEventListener('animationcancel', () => element.isAnimating = false);

  // 监听过渡动画事件
  element.addEventListener('transitionstart', () => element.isAnimating = true);
  element.addEventListener('transitionend', () => element.isAnimating = false);
  element.addEventListener('transitioncancel', () => element.isAnimating = false);
}

使用示例 #

let div_with_anim = document.getElementById("div_with_anim");
// 先初始化跟踪
setupAnimationTracking(div_with_anim);

// 直接判断状态
if (div_with_anim.isAnimating) {
  console.log("动画正在运行");
}

注意事项 #

• 方案1的getAnimations()支持Chrome 84+、Firefox 75+、Safari 14.1+，适合现代浏览器环境；
• 如果只需要检测特定类型的动画（比如仅CSS动画或仅过渡），可以在过滤时添加anim.type === 'css'或anim.type === 'transition'的判断；
• 方案2需要提前调用初始化函数，才能正常获取状态。

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