本文详解如何在 Vue 3 组合式 API 中可靠重启 @keyframes 动画（如缩放弹跳效果），解决因响应式更新导致动画不触发、仅执行一次或状态卡死的问题，核心是结合 requestAnimationFrame 强制 DOM 重排（reflow）并动态切换动画类名。
本文详解如何在 vue 3 组合式 api 中可靠重启 `@keyframes` 动画（如缩放弹跳效果），解决因响应式更新导致动画不触发、仅执行一次或状态卡死的问题，核心是结合 `requestanimationframe` 强制 dom 重排（reflow）并动态切换动画类名。
在 Vue 3 应用中直接通过响应式数据（如 ref 或 computed）控制 .animation-in / .animation-out 类绑定，看似简洁，却常遭遇一个根本性限制：CSS 动画不会重复播放。这是因为浏览器将连续的 class 切换视为样式属性更新，而非“新动画生命周期”——尤其当动画设置了 animation-fill-mode: forwards 时，元素已停留在终态（如 transform: scale(0)），再次添加相同动画类不会触发重播。
原生 JavaScript 中的经典解法是利用 requestAnimationFrame + 强制 reflow 实现可靠重播，其原理三步到位：
-
临时清空动画样式（如
el.style.animation = 'none'）； -
强制触发重排（读取
offsetHeight、getBoundingClientRect()等布局属性）； -
恢复动画样式（如
el.style.animation = null或重新赋值），使浏览器识别为全新动画实例。
在 Vue 3 组合式 API 中，我们需将该逻辑封装为可复用、响应式安全的动画控制器。以下为推荐实现：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
✅ 推荐：组合式动画重播 Hook（useAnimationReplay）
// composables/useAnimationReplay.ts
import { ref, onMounted, nextTick } from 'vue'
export function useAnimationReplay() {
const elRef = ref<HTMLElement | null>(null)
const replay = (inClass: string, outClass: string, isActive: boolean) => {
if (!elRef.value) return
const el = elRef.value
// 1. 清空当前动画，避免冲突
el.style.animation = 'none'
// 2. 强制 reflow —— 关键！必须在清空后立即读取布局属性
void el.offsetHeight // 触发同步重排
// 3. 移除旧类，添加新类
el.classList.remove(isActive ? outClass : inClass)
el.classList.add(isActive ? inClass : outClass)
// 4. 恢复动画（自动触发重播）
el.style.animation = ''
}
return {
elRef,
replay
}
}✅ 在组件中使用
<template>
<div
ref="elRef"
:class="['element', isActive ? 'animation-in' : 'animation-out']"
></div>
<button @click="toggle" style="padding:5px;margin:10px;width:200px;height:30px;">
{{ isActive ? 'Start Animation Out' : 'Start Animation In' }}
</button>
</template>
<script setup>
import { ref } from 'vue'
import { useAnimationReplay } from './composables/useAnimationReplay'
const isActive = ref(false)
const { elRef, replay } = useAnimationReplay()
const toggle = () => {
isActive.value = !isActive.value
// ✅ 关键：在 nextTick 后调用 replay，确保 DOM 已更新
nextTick(() => {
replay('animation-in', 'animation-out', isActive.value)
})
}
</script>
<style>
.element {
width: 100px;
height: 150px;
background-color: green;
margin: 20px;
transform: scale(0);
}
.animation-in {
animation: scale-easeInOutBounce 4s ease reverse forwards;
}
.animation-out {
animation: scale-easeInOutBounce 4s ease normal forwards;
}
@keyframes scale-easeInOutBounce {
0% { transform: scale(1); }
2% { transform: scale(0.99); }
4% { transform: scale(1); }
10% { transform: scale(0.97); }
14% { transform: scale(0.99); }
22% { transform: scale(0.88); }
32% { transform: scale(0.99); }
42% { transform: scale(0.6); }
50% { transform: scale(0.5); }
58% { transform: scale(0.4); }
68% { transform: scale(0.01); }
78% { transform: scale(0.12); }
86% { transform: scale(0.01); }
90% { transform: scale(0.03); }
96% { transform: scale(0); }
98% { transform: scale(0.01); }
100% { transform: scale(0); }
}
</style>⚠️ 注意事项与最佳实践
-
不要在
computed中执行 DOM 操作：原始代码中在computed.classes内调用requestAnimationFrame是反模式的——computed应保持纯函数性，且无法保证 DOM 已挂载或更新完成。 -
nextTick不可省略：isActive.value改变后，DOM 尚未同步更新，必须等待nextTick()才能安全操作真实 DOM 节点。 -
避免
v-if/v-show干扰：若动画元素被v-if移除，动画自然中断；建议统一用v-show或 CSS 控制显隐，确保元素始终存在于 DOM 中。 -
性能考量：
offsetHeight触发的是同步重排，虽必要但应谨慎高频调用；本方案仅在用户主动触发时执行，符合性能预期。 -
可扩展性：该
useAnimationReplayHook 可轻松支持多动画类型、延迟控制、回调钩子等，适合作为项目级动画基础设施。
通过以上方案，你不再依赖“移除再添加元素”的 hack 方式，而是以 Vue 3 原生、响应式友好的方式，精准掌控 CSS Keyframes 动画的每一次重播——让弹跳、缩放、位移等复杂动效真正“活”起来。
立即学习“前端免费学习笔记（深入）”；
