淡出动画卡顿的根源在类名缺失或冲突：fade提供opacity过渡，show触发动画，二者缺一不可；手动删show、加d-none或移除fade均会跳过动画导致硬切。
淡出动画卡顿的根源在类名缺失或冲突
Bootstrap 警告框淡出卡顿，90% 是因为 fade 和 show 类没同时存在，或者被其他 CSS 覆盖了过渡属性。fade 提供 opacity 过渡声明，show 是触发动画的“开关”——缺一不可。手动加 opacity: 0 或直接 remove() 都会跳过整个动画流程，变成硬切。
-
fade类必须出现在元素上，且不能被!important覆盖掉transition: opacity .15s linear - 如果用了自定义主题或 CSS-in-JS，检查
.alert.fade的transition是否被重置为none或0s - DevTools 里选中警告框，手动删掉
show类——没开始淡出？说明fade没生效，回查类名拼写或加载顺序
JS 主动关闭时阻止默认行为是关键
调用 alertEl.alert('close') 后，Bootstrap 默认会在动画结束时把整个 DOM 元素删掉。如果你后续还想复用这个警告框（比如表单提交成功后反复显示），就必须拦截这个销毁动作，否则第二次调用就失效。
- 必须先监听
closed.bs.alert事件，并在回调里调用e.preventDefault() - 然后手动移除
show类并加d-none，而不是依赖 Bootstrap 自动清理 - 别在
DOMContentLoaded外直接执行setTimeout—— 警告框节点可能还没挂载
动画中途卡住或停在半透明状态
常见于直接加 d-none 或删 fade 类的操作。CSS 动画依赖类名切换节奏：show 移除 → fade 触发 opacity 过渡 → 过渡结束触发 closed.bs.alert。跳过中间任一环，浏览器就失去插值依据。
- 只加
d-none不删show：元素隐藏但 opacity 仍为 1，无动画 - 删了
fade类再删show：过渡属性丢失，opacity瞬间归零 - 想调速？改 CSS：
.alert.fade { transition: opacity .25s ease-out; }，别碰 JS 的延时逻辑
多个警告框时批量操作容易误关
用 document.querySelectorAll('.alert') 配 forEach + setTimeout，极易在页面有多个警告框（如表单错误 + 成功提示）时关错目标。DOM 结构稍一变化，选择器就失焦。
- 优先用唯一 ID：
document.getElementById('form-success-alert') - 如果必须批量，给每个警告框加 data-role 属性，比如
data-role="auto-dismiss"，再用querySelectorAll('[data-role="auto-dismiss"]') - 避免在 alert 初始化前就绑定事件——Bootstrap 插件需等
data-bs-dismiss="alert"存在才能激活
真正卡顿的地方往往不在 JavaScript，而在你删掉 fade 类时没意识到它承载着整条过渡链。动画不是“加个 delay 就行”，而是靠类名切换+CSS 声明+事件钩子三者咬合运转。漏掉任意一环，浏览器就只能硬切。
