本文详解如何在 transitionend 事件完成后可靠地重新触发 CSS 过渡动画，重点解决“直接修改 class 无效”的常见陷阱，并提供 setTimeout 延迟调用与 CSS 动画替代方案两种专业级实现方式。
本文详解如何在 `transitionend` 事件完成后可靠地重新触发 css 过渡动画，重点解决“直接修改 class 无效”的常见陷阱，并提供 `settimeout` 延迟调用与 css 动画替代方案两种专业级实现方式。
在 Web 动画开发中，一个典型需求是：让某个元素完成一次 CSS transition 后，立即自动开始下一轮动画（例如循环平移）。但初学者常遇到如下问题——在 transitionend 回调中直接调用 play() 函数（即再次添加 .play 类），却没有任何视觉效果。原因在于：浏览器的渲染机制决定了，若在同一个事件循环中连续添加再移除、又立即添加同一 CSS 类，样式引擎可能将其视为“无变更”，从而跳过重排/重绘流程。
✅ 正确做法：使用 setTimeout 强制脱离当前渲染帧
关键在于将类操作推迟到下一个宏任务，确保浏览器已完整处理完上一次过渡的结束与样式清理：
const div1 = document.querySelector(".div1");
function play() {
div1.classList.add("play");
}
function callback() {
div1.classList.remove("play");
// ⚠️ 必须延迟执行，否则 transition 不会重新触发
setTimeout(play, 0);
}
div1.addEventListener("transitionend", callback);对应 CSS（注意：.play 类需包含 transition 声明）：
.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
transition: transform 1s ease-in-out;
transform: translateX(100px);
}HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="div1"></div> <button onclick="play()">Play</button>
? 为什么 setTimeout(fn, 0) 有效？
它将 play() 推入下一个宏任务队列，此时浏览器已完成 transitionend 的同步处理、清除了 .play 类并重置了 transform。新任务中重新添加 .play，会触发全新的过渡生命周期，从而实现无缝循环。
✅ 更优方案：改用 CSS @keyframes 动画（推荐）
若目标是无限循环动画，CSS 动画天然支持 infinite 模式，代码更简洁、性能更高，且完全规避 JavaScript 时序问题：
const div1 = document.querySelector(".div1");
function play() {
div1.classList.add("play"); // 仅需一次添加
}.div1 {
width: 200px;
height: 100px;
background-color: limegreen;
}
.play {
animation: go-right 1s ease-in-out infinite;
}
@keyframes go-right {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}✅ 优势总结：
- 无需监听 transitionend，零 JS 时序风险；
- 硬件加速更稳定，动画更流畅；
- 支持 animation-play-state 暂停/恢复，控制力更强。
⚠️ 注意事项与最佳实践
- 避免重复绑定事件：若 play() 可能被多次调用，建议在添加前检查是否已绑定 transitionend，或使用 once: true（如需单次触发）；
- 兼容性处理：transitionend 存在厂商前缀（如 webkitTransitionEnd），现代项目建议使用 on-transition-end 等轻量库封装；
- 性能敏感场景：优先选用 CSS 动画；JS 控制仅适用于需动态计算位移、条件中断等复杂逻辑；
- 可访问性：循环动画应遵循 WCAG 2.2 要求，提供 prefers-reduced-motion 降级方案。
通过理解浏览器渲染流水线与事件循环机制，你不仅能解决“点击后无法再次动画”的问题，更能构建出健壮、高性能的交互动画系统。
