transitionend 事件仅在 CSS transition 动画完全执行完毕后触发一次，且要求属性实际变化并具有有效过渡效果；若过渡被取消、属性未变或时长为 0s，则不触发，多属性过渡会为每个完成属性分别派发事件。
transitionend 事件什么时候触发
它只在 CSS transition 动画**完全执行完毕后**触发一次，前提是该属性确实发生了变化且有过渡效果。如果过渡被取消（比如 class 被快速移除）、属性没变、或过渡时长为 0s，transitionend 就不会触发。
注意：一个过渡动画可能涉及多个属性（如 transform 和 opacity），浏览器会为每个完成的属性各派发一次 transitionend，所以常需用 event.propertyName 过滤。
如何绑定并正确监听 transitionend
推荐用 addEventListener 绑定，避免重复监听或内存泄漏。关键点：
- 使用
{ once: true }确保回调只执行一次，防止多次触发（比如快速连续 toggle） - 检查
event.propertyName，只响应你关心的属性，例如只处理transform结束 - 监听前确保元素已挂载且有生效的
transition声明（不能只靠 JS 添加 class 后立刻监听，要等样式计算完成，必要时用requestAnimationFrame）
示例：
立即学习“前端免费学习笔记（深入）”；
NetShop网店系统
下载
NetShop软件特点介绍： 1、使用ASP.Net(c#)2.0、多层结构开发 2、前台设计不采用任何.NET内置控件读取数据，完全标签化模板处理，加快读取速度3、安全的数据添加删除读取操作，利用存储过程模式彻底防制SQL注入式攻击4、前台架构DIV+CSS兼容IE6,IE7,FF等，有利于搜索引挚收录5、后台内置强大的功能，整合多家网店系统的功能，加以优化。6、支持三种类型的数据库：Acces
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'transform') {
console.log('transform 过渡结束');
// 执行后续操作，如移除 class、启用按钮、触发 API
}
}, { once: true });
常见坑：为什么 transitionend 没触发
这是实际开发中最常卡住的地方：
-
transition没生效：检查是否写了transition: all 0.3s，但实际变更的属性被all忽略（如display、position不支持过渡） - 过渡被中断：class 切换太快，旧过渡还没结束新样式就来了，旧的
transitionend被丢弃 - 监听对象错误：给父元素绑定了事件，但过渡发生在子元素上（事件不冒泡到非目标元素）
- CSS 层叠覆盖：其他样式规则把
transition值重置为none或0s - 初始状态无变化：比如从
opacity: 1→opacity: 1，即使写了 transition 也不会触发事件
替代方案：何时不该用 transitionend
当过渡逻辑复杂、需精确控制时，transitionend 很容易失控。比如：
- 需要链式动画（A 完成 → B 开始 → C 开始），建议改用
Web Animations API或GSAP - 需兼容 IE（不支持
transitionend），得降级为setTimeout+ 固定时长模拟（不推荐，但有时不得不做） - 过渡依赖媒体查询或动态计算值，导致时长不确定，此时应统一用 JS 控制动画时长并手动计时
真正稳定可靠的回调时机，往往不是靠浏览器事件“猜”，而是由 JS 主导整个过渡生命周期——这点容易被忽略，但影响长期可维护性。
