JavaScript 中事件机制怎么监听动画完成的事件-js教程-PHP中文网

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

javascript 中事件机制怎么监听动画完成的事件

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 部分监听并清理：

Alibabacloud Sdk Client Initialization For Java

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

下载

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

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