直接加 animate__fadeIn 无效，因 Bootstrap 4 的 Tabs 动画依赖 .tab-pane.fade 和 .show 类触发 CSS transition，手动添加 animate__fadeIn 会与 fade 类冲突，导致 opacity 覆盖、动画卡顿或首次不显示；须移除 fade 类，用 show.bs.tab 和 shown.bs.tab 事件动态控制 Animate.css 类，确保重播与时机同步。
为什么直接加 animate__fadeIn 没反应
Bootstrap 4 的 Tabs 切换动画依赖 .tab-pane.fade 和 .show 类触发 CSS transition，不是靠 JS 插入动画类。你手动给 tab-pane 加 animate__fadeIn，但没移除默认的 fade 类，结果是两套过渡逻辑打架：opacity 变化被 Animate.css 的 keyframes 覆盖，而 Bootstrap 的 JS 还在监听 show 类来控制 aria-hidden，最终动画卡顿、不重播，甚至首次不显示。
必须做三件事：
- 移除所有
tab-pane上的fade类（否则 CSS 动画冲突） - 用
show.bs.tab事件监听切换开始，动态加 Animate.css 类 - 用
shown.bs.tab事件清理旧类并确保新动画可重播
show.bs.tab 和 shown.bs.tab 怎么配合用
这两个事件时机关键：show.bs.tab 在点击后、内容还没显示前触发；shown.bs.tab 在 DOM 已更新、show 类已加上、aria-hidden="false" 已设置完毕后才触发。只有这时操作动画类，才能保证浏览器重绘节奏对齐。
示例代码（需引入 Animate.css v4+）：
立即学习“前端免费学习笔记（深入）”；
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
const $pane = $($(e.target).attr('href'));
// 清掉旧动画类，避免重复叠加
$pane.removeClass('animate__animated animate__fadeInUp');
// 补上新动画类（注意 animate__animated 是必需前缀）
$pane.addClass('animate__animated animate__fadeInUp');
});
别漏掉这点：
- 不能在 HTML 里静态写死
animate__animated—— 第二次切换不会重播 - 目标
tab-pane必须有id或能被href唯一匹配，否则$pane为空 - 如果用了
data-bs-toggle（Bootstrap 5 写法），要同步改选择器
想滑动入场？别碰 transform: translateX() 硬写
直接覆盖 .tab-pane 的 transform 会和 Bootstrap 的 display: none / block 切换冲突 —— display 变更会中断 CSS transition。正确做法是用 opacity + transform 组合，并保持 visibility: hidden/visible 控制占位。
推荐最小可行 CSS：
.tab-pane {
opacity: 0;
transform: translateX(20px);
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tab-pane.show {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
注意：
- 必须保留
.show类（Bootstrap JS 依赖它），不能只靠 JS 切换active -
visibility比display更安全，避免布局抖动 - 移动端加
will-change: transform可提升滑动帧率，但别滥用，低端机可能掉帧
React 项目里怎么处理
React Bootstrap 的 TabPane 不自动加 fade 类，更不会管你自定义动画。你得自己控制类名生命周期。
关键点：
- 每个
TabPane都要传className="tab-pane"（别漏） - 当前激活的
TabPane需额外加show类（用activeKey对比判断） - 用
useEffect监听activeKey变化，在 DOM 更新后加动画类（类似shown.bs.tab的时机） - 千万别用
transition={true}—— 它只适配原生fade，和你的 CSS 动画互斥
容易被忽略的是：服务端渲染（SSR）时，首屏的 show 类必须由 React 同步输出，否则 hydration 会错乱，导致初始无动画或闪屏。
