本文详解如何在 Vue 3 应用中正确触发 CSS @keyframes 动画的重播（如缩放弹跳效果），解决因响应式更新导致动画不触发或仅执行一次的问题，核心在于强制 DOM 重排（reflow）并结合类名动态切换。
本文详解如何在 vue 3 应用中正确触发 css `@keyframes` 动画的重播（如缩放弹跳效果），解决因响应式更新导致动画不触发或仅执行一次的问题，核心在于强制 dom 重排（reflow）并结合类名动态切换。
在 Vue 3 中直接通过响应式数据控制 class 绑定（如 :class="classes"）来切换 .animation-in / .animation-out 类，看似简洁，却常面临一个关键问题：CSS 动画不会重复播放。这是因为浏览器将连续的 class 切换视为样式更新而非“新动画触发”，尤其当目标动画使用 animation-fill-mode: forwards 时，元素已处于终态，再次添加相同动画类不会重新启动。
原生 JavaScript 中可通过 requestAnimationFrame + 强制 reflow 实现可靠重播，其原理是：临时清空 animation 样式 → 触发浏览器重排（读取 offsetHeight 等布局属性）→ 恢复动画样式，从而让浏览器识别为一次全新的动画生命周期。该技巧在 Vue 中同样适用，但需适配组合式 API 和响应式生命周期。
