JavaScript监听CSS动画完成应使用animationend事件，它在@keyframes动画完整播放一遍后触发，需通过addEventListener绑定并校验event.animationName，与transitionend严格区分。

JavaScript 监听动画完成，核心是使用 `animationend` 事件。它在 CSS 动画（由 `@keyframes` 定义、通过 `animation` 属性触发）**完整播放一遍后**触发，不包括中途取消或重复中的某次结束。 这个事件监听方式简洁直接，无需额外库，原生支持良好（现代浏览器全覆盖），且语义明确——专为“动画播完”而设。

监听 animationend 的基本写法

给目标元素绑定 `animationend` 事件即可：

• 确保元素确实应用了 CSS 动画（有 `animation-name` 和有效时长）
• 用 addEventListener('animationend', handler) 注册监听
• 回调函数中可通过 event.animationName 区分多个动画（如果一个元素有多个动画）

实际例子：动画结束后隐藏元素

HTML 和 CSS 部分定义一个淡出动画：

.fade-out {
  animation: fadeOut 0.5s ease-out;
}
@keyframes fadeOut {
  to { opacity: 0; }
}

JS 部分监听并清理：

const el = document.querySelector('.fade-out');
el.addEventListener('animationend', function (e) {
  if (e.animationName === 'fadeOut') {
    el.style.display = 'none';
  }
});

注意判断 animationName，避免其他动画（如入场动画）误触发逻辑。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

和 transitionend 的区别要分清

transitionend 监听的是 CSS 过渡（由属性值变化触发，如 hover 改变 background-color），不是动画；animationend 只响应 @keyframes 动画。两者不能混用。

如果你用的是 CSS 过渡效果，就该监听 transitionend；如果是定义好的关键帧动画，就用 animationend。

常见陷阱与应对

• 动画未触发就监听：确保元素已渲染、动画属性已生效（比如 class 是后来加的，需等 DOM 更新后再绑定）
• 重复绑定导致多次执行：若逻辑只应运行一次，可用 { once: true } 选项自动移除监听器
• 动画被跳过（duration 为 0）：此时 animationend 不会触发，需单独处理
• 浏览器前缀兼容性：旧版 Safari 需监听 webkitAnimationEnd，但当前主流版本已无需手动处理