transitionend 在多属性过渡时会为每个属性各触发一次，需用 propertyName 过滤目标属性、once: true 防重复绑定、e.target 判断避免子元素干扰，或改用固定时长 setTimeout 确保回调只执行一次。
transitionend 在多个属性同时过渡时会为每个属性各触发一次，不是“出错了”，而是设计如此。想只执行一次回调，关键不是阻止事件发生，而是控制回调逻辑的执行时机和条件。
用 propertyName 精准过滤目标属性
过渡多个属性（比如 transform 和 opacity）时，event.propertyName 会分别是 "transform" 和 "opacity"。只需在回调里判断你真正关心的那个：
- 写法示例：if (e.propertyName === 'transform') { /* 执行后续操作 */ }
- 避免用 transition: all，否则可能意外监听到 box-shadow、color 等无关属性的变化
- 如果多个属性都重要，且必须等全部结束，就不要依赖 transitionend——改用固定时长 + setTimeout 更可靠
用 once: true 防止重复绑定累积
连续触发类切换（如快速开关弹窗）时，若每次都在元素上 addEventListener('transitionend', handler)，容易堆叠多个监听器。推荐直接使用原生选项：
- el.addEventListener('transitionend', handler, { once: true })
- 这样无论 event 触发几次，handler 最多执行一次，也无需手动 removeEventListener
- 配合 propertyName 过滤，能兼顾精准性和安全性
确保只响应当前元素，不被子元素干扰
transitionend 不冒泡，但会从子元素向上派发到父级监听器。如果你在父容器上监听，子元素过渡完成也会触发该回调：
立即学习“Java免费学习笔记（深入）”；
- 加判断：if (e.target !== e.currentTarget) return
- 或更明确地写：if (e.target !== el) return（el 是你原本想监听的元素）
- 这能避免子项动画干扰主流程，尤其在列表、卡片组中很实用
更稳妥的替代思路：统一时长 + 定时清理
当过渡属性多、浏览器兼容性复杂，或需保证逻辑绝对只跑一次时，可绕开事件监听：
- CSS 中所有过渡属性设相同 duration，例如 transition: transform 0.3s ease, opacity 0.3s ease
- JS 中 class 切换后，直接 setTimeout(() => { /* 清理或下一步 */ }, 300)
- 省去事件判断开销，逻辑清晰，适合按钮反馈、模态框关闭等确定性场景
