WOW.js 在 Bootstrap 页面中常失效是因为初始化时机与 DOM 渲染节奏不匹配，需在 DOM 就绪且 Bootstrap 组件渲染完成后再 init，并监听 collapse/tab 事件调用 refresh()，同时设置 offset: 100、mobile: false 避免冲突。
WOW.js 为什么在 Bootstrap 页面里常失效
不是 Bootstrap 拦着 WOW.js，而是两者初始化时机和 DOM 渲染节奏不匹配。常见现象是：页面刷新后动画没触发，或只在首次滚动时生效一次，后续滚动无反应。根本原因是 WOW.init() 执行太早——DOM 还没完全就绪，或者 Bootstrap 的某些组件（比如 collapse、tab-pane）动态插入内容后，WOW 并不知道要重新检查这些新元素。
必须等 DOM 就绪且 Bootstrap 组件渲染完成再 init
不能把 new WOW().init() 放在 <script></script> 标签末尾就完事。尤其当页面含 data-bs-toggle="collapse" 或 data-bs-toggle="tab" 时，得监听对应事件再手动触发重扫描。
- 基础场景（纯静态 Bootstrap 页面）：用
document.addEventListener('DOMContentLoaded', ...)包裹WOW.init() - 含折叠面板（
collapse）：监听shown.bs.collapse事件，在回调里调用WOW.refresh() - 含选项卡（
tab）：监听shown.bs.tab事件，同样调用WOW.refresh() - 若用了 Bootstrap 5.3+ 的
data-bs-theme="dark"等动态主题切换，也需在主题变更后调用WOW.refresh()
WOW 配置项和 Bootstrap 布局的冲突点
offset 和 mobile 是最容易出问题的两个参数。Bootstrap 的栅格（col-*）、间距工具（mb-4、px-5）会影响元素实际进入视口的位置；而默认 offset: 0 在移动端常导致动画过早触发或不触发。
- 建议显式设置
offset: 100（单位 px），避开 Bootstrap 的 margin/padding 干扰 - 设
mobile: false更稳妥——Bootstrap 的响应式断点和 WOW 的设备检测逻辑不一致，容易让手机端动画失效 - 避免对
.container或.row直接加class="wow slideInUp"，它们常被 Bootstrap 设为overflow: hidden或transform，会截断动画渲染 - 动画类名必须加在最终可见内容容器上，比如
row
一个最小可运行集成示例
以下代码片段可直接粘贴进 Bootstrap 5 页面底部（
