父组件通过布尔型Props（如isAnimating）或triggerId控制子组件动画触发，子组件监听变化切换CSS类名并配合onAnimationEnd回调通知父组件，避免内部维护状态。
父组件通过传递布尔型 Props 控制子组件动画的触发时机，是最常用且清晰的方式。关键在于子组件将 Props 作为动画状态的唯一驱动源，避免内部维护冗余状态。
用 isAnimating Prop 触发 CSS 动画
子组件不自行决定“什么时候开始”，而是监听父传入的 isAnimating 值变化，配合 CSS 类名切换实现动画：
- 父组件控制该 Prop 的值（如从
false → true → false） - 子组件用
useEffect监听变化，添加/移除动画类名（例如animate-in或animate-out） - CSS 中定义对应类名的
@keyframes和animation属性，注意设置animation-fill-mode: forwards保持结束帧
用 triggerId Prop 实现可重复触发
当需要多次执行同一动画（比如点击按钮反复弹出提示），直接用布尔值会因连续 true→true 无变化而失效。此时可用数字或字符串 ID 作为“触发信号”：
- 父组件每次想触发动画时，更新
triggerId（如Math.random()或递增计数器） - 子组件用
useEffect监听triggerId，变化时重置动画类名（先移除再添加），强制浏览器重新播放 - 适合需要“重放”而非“启停”的场景，比如按钮点击反馈、列表项逐个入场
配合 onAnimationEnd 回调通知父组件
动画结束后常需更新业务逻辑（如隐藏弹窗、启用按钮）。子组件应在 CSS 动画完成时主动通知父组件：
- 在子组件中绑定
onAnimationEnd事件处理器 - 检测
event.animationName区分入场/退场动画（如'slideIn'或'fadeOut'） - 调用父组件传入的回调函数（如
onAnimationComplete），并传入类型标识，便于父组件精确响应
避免常见陷阱
实际使用中容易忽略几个细节：
-
不要在子组件里用
useState管理动画状态——这会让父组件失去控制权，变成“父子各管各的” - CSS 动画类名切换要确保有足够时间被浏览器识别，必要时加
setTimeout(() => ..., 0)微任务延迟 - 若用
transition而非animation，需确保触发属性（如opacity、transform）确实发生了变化
