异常教程

animationend 事件（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，动画不仅是视觉表现的工具，更是提升用户体验的核心要素。无论是按钮点击后的反馈效果，还是页面加载时的动态引导，动画都能让交互更加生动。然而，如何在动画结束时触发特定操作？这就需要借助 animationend 事件——一个连接 CSS 动画与 JavaScript 逻辑的桥梁。本文将从基础概念到实战案例，逐步解析这一事件的使用场景、实现原理及进阶技巧，帮助开发者高效掌控动画生命周期的控制权。

一、什么是 animationend 事件？

animationend 事件是 CSS 动画完成后触发的 JavaScript 事件。它类似于交通灯的“绿灯”信号，当动画到达最后一帧时，会向开发者发出明确的“完成”通知，以便执行后续操作。

1.1 事件触发条件

  • 动画必须在浏览器中完全播放完毕，包括延迟（animation-delay）和持续时间（animation-duration）。
  • 若动画因 animation-iteration-count 设置为 infinite 而无限循环，则不会触发该事件。

1.2 与 transitionend 的区别

  • transitionend：针对 CSS 过渡（transition）的完成事件。
  • animationend：针对 CSS 动画（@keyframes）的完成事件。
    比喻：若过渡是“从 A 到 B 的直线运动”，动画则是“包含多个关键帧的舞蹈动作”，两者触发事件的场景不同。

二、如何监听 animationend 事件？

2.1 基本语法

使用 element.addEventListener('animationend', callback) 监听事件。事件对象包含以下关键属性：

  • animationName：触发事件的动画名称（即 @keyframes 的规则名）。
  • elapsedTime：动画实际播放的时间（以秒为单位）。
  • pseudoElement：若动画作用于伪元素（如 ::before），则返回对应选择器。

示例代码

const element = document.querySelector('.my-element');  
element.addEventListener('animationend', (event) => {  
  console.log('动画结束！', event.animationName);  
  // 执行后续操作，例如隐藏元素或触发新动画  
  element.style.display = 'none';  
});

2.2 处理多个动画

若元素同时应用多个动画，需通过 event.animationName 区分触发源：

element.addEventListener('animationend', (event) => {  
  switch (event.animationName) {  
    case 'spin':  
      console.log('旋转动画结束');  
      break;  
    case 'fade':  
      console.log('渐隐动画结束');  
      break;  
  }  
});

三、实战案例：按钮点击后的动态反馈

3.1 场景描述

设计一个按钮，点击后执行缩放动画，动画结束后显示“操作完成”提示框。

3.2 实现步骤

  1. CSS 动画定义
@keyframes pulse {  
  0% { transform: scale(1); }  
  50% { transform: scale(1.1); }  
  100% { transform: scale(1); }  
}  
.button {  
  animation: pulse 0.5s ease;  
}
  1. JavaScript 监听与回调
document.querySelector('.button').addEventListener('click', () => {  
  // 触发动画  
  this.classList.add('button');  
  // 监听动画结束  
  this.addEventListener('animationend', handleAnimationEnd);  
});  

function handleAnimationEnd(event) {  
  if (event.animationName === 'pulse') {  
    alert('操作完成！');  
    // 移除事件监听，避免重复触发  
    this.removeEventListener('animationend', handleAnimationEnd);  
  }  
}

3.3 优化点

  • 使用 once: true 参数简化监听逻辑： 
    this.addEventListener('animationend', handleAnimationEnd, { once: true });

四、高级技巧与常见问题

4.1 处理浏览器兼容性

部分旧浏览器（如 IE）不支持原生事件，可通过添加前缀（如 webkitAnimationEnd、mozAnimationEnd）兼容：

const animationEndEvents = [  
  'animationend',  
  'webkitAnimationEnd',  
  'oAnimationEnd',  
  'MozAnimationEnd'  
];  

animationEndEvents.forEach((type) => {  
  element.addEventListener(type, callback);  
});

4.2 动态控制动画触发

若需在动画中途强制停止并忽略事件，可调用 element.style.animation = 'none';，但需注意此操作会立即终止动画。

4.3 复杂场景：动画序列化

通过 animationend 链式调用实现多步骤动画：

let step = 1;  
element.addEventListener('animationend', (event) => {  
  switch (step) {  
    case 1:  
      element.style.animation = 'slide 1s';  
      step = 2;  
      break;  
    case 2:  
      element.style.animation = 'fade 0.5s';  
      step = 3;  
      break;  
  }  
});

五、为什么 animationend 事件如此重要？

  1. 精准控制交互流程：例如，动画结束后自动跳转页面或提交表单。
  2. 资源优化：避免在动画运行时加载非必要数据，减少性能损耗。
  3. 无障碍设计：通过事件回调提供屏幕阅读器的语音提示，提升包容性。

结论

animationend 事件是连接 CSS 动画与 JavaScript 逻辑的关键纽带。通过掌握其触发机制、监听方法及进阶技巧，开发者能构建更流畅、响应式更强的交互体验。无论是简单的按钮反馈，还是复杂的动画序列，合理利用这一事件都能显著提升代码的优雅度与用户体验。

从今天起，尝试为你的项目添加动画结束回调吧——让每一帧动画都成为用户旅程中的完美句号。

最新发布

查看更多文章