Tab切换后CSS动画不重播，是因浏览器保留动画结束状态且DOM可能重建；需先设animationName为none、触发offsetHeight重排，再恢复动画名，或通过onappear监听+状态管理+语义化API修复。
Tab切换后CSS动画不重播，不是动画“坏了”，而是浏览器按规范保留了上一次动画结束后的样式状态，且元素可能被销毁重建——必须手动干预渲染流程才能恢复动画行为。
animation-name 切换无效？先清空再强制重排
单纯改 element.style.animationName 不会清除上一次动画留下的 computed 样式（比如 transform、opacity），尤其当 animation-fill-mode: forwards 生效时，结束帧会“粘住”。
- 先设
element.style.animationName = 'none' - 立刻读取布局属性触发重排：
element.offsetHeight（不能省） - 再设回目标动画名：
element.style.animationName = 'bounce' - 如果用 class 控制，确保初始 class 明确写
transform: none或具体初始值，避免和 keyframes 最终帧冲突
Tab 页签销毁重建导致动画中断？靠 onappear 恢复状态
条件渲染（如 v-if / if/else）下，页签切走后 DOM 被移除，动画自然终止；再切回来是全新实例，不会继承上次动画进度。
- 在组件的
onappear（或mounted+isShown判断）中检查是否应处于动画中 - 用一个外部变量（如 ref 或全局状态）记录动画触发时机或阶段
- 确认条件满足后，再次添加动画类或设置
animationName并执行重排流程 - 避免在
onappear中直接调用offsetHeight前未确保元素已挂载并可见（可加nextTick或requestAnimationFrame延迟）
表格、Tab 内容区动画错位？别依赖 resize 事件
Tab 切换常伴随容器尺寸变化（如 DataTable 或 layui.table），但 window.resize 是副作用触发，不可靠且易引发多次重绘。
立即学习“前端免费学习笔记（深入）”；
- 监听明确的 Tab 显示事件，如 Bootstrap 的
shown.bs.tab或 layui 的afterChange - 对目标表格调用语义化 API：
table.columns.adjust().draw(false)（DataTables）或table.resize(tableId)（Layui） - 动画元素若嵌套在表格内，确保其父容器有
overflow: hidden，防止transform偏移内容溢出 - 避免给动画元素设固定
height，优先让内容撑开高度，否则transform可能导致布局塌陷
真正卡住的地方往往不是动画写法本身，而是没意识到：浏览器不会替你“撤销”动画结束态，也不会在 DOM 重建后自动恢复动画上下文。每次切换都得当作新起点来处理关键样式与重排时机。
