如何在 CSS 过渡（transition）结束后自动触发下一次动画

本文详解如何在 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 降级方案。

通过理解浏览器渲染流水线与事件循环机制，你不仅能解决“点击后无法再次动画”的问题，更能构建出健壮、高性能的交互动画系统。