bootstrap alert 淡出失效的根本原因是css过渡与js状态切换未协同：必须同时满足fade/show类、未覆盖transition、插件已初始化且调用alert('close')。关闭后无法再显示是因为默认移除dom节点，需改用d-none控制显隐或阻止closed.bs.alert默认行为。
Bootstrap Alert 为什么加了 fade show 还是硬切不淡出
根本原因在于：淡出动画依赖 CSS 过渡 + JS 正确触发状态切换，缺一不可。只加 fade show 类，但没调用 alert('close') 或没等 DOM 就绪，动画就卡住或直接跳变。
常见错误现象：
- 点关闭按钮后警告框瞬间消失（没过渡）
- 页面加载完立即执行
setTimeout(() => el.alert('close'), 2000)，但元素还没初始化插件 - 手动删了
data-bs-dismiss="alert"，结果alert('close')完全失效
必须确保：
<div class="alert alert-success fade show"> 中同时存在 <code>fade和show（Bootstrap 5+）- CSS 中有定义：
.alert.fade { transition: opacity .15s linear; }（默认自带，别覆盖成none） - 调用
alert('close')前，该元素已由 Bootstrap 初始化过——这靠data-bs-dismiss="alert"或手动bootstrap.Alert.getOrCreateInstance(el)触发 - HTML 中保留
data-bs-dismiss="alert"（它不只是给 × 按钮用的，更是插件初始化开关） - JS 中用
document.addEventListener('DOMContentLoaded', () => { ... })包裹逻辑 - 对具体元素操作，避免
document.querySelectorAll('.alert')这种宽泛选择器 - 定时关闭写法：
setTimeout(() => alertEl.alert('close'), 3000)，不是.hide()或.remove()
用 setTimeout 实现自动关闭的正确写法
不能直接在 HTML 里写 onclick="setTimeout(...)"，也不能在 DOMContentLoaded 前就执行定时逻辑。核心是「等插件就绪 → 设定时器 → 调用 close」三步闭环。
推荐实操方式：
示例片段：
document.addEventListener('DOMContentLoaded', () => {
const successAlert = document.getElementById('form-success-alert');
if (successAlert) {
setTimeout(() => successAlert.alert('close'), 2500);
}
});
为什么关闭一次后就再也显示不出来
因为 Bootstrap 默认行为是：调用 alert('close') 或点击 × 后，不仅隐藏，还会把整个 <div class="alert"> 从 DOM 中 <code>remove() 掉。下次你再想 classList.remove('d-none')，对象已经 null 了。
解决路径只有两条，选其一即可：
- 【推荐】移除
data-bs-dismiss="alert"，改用纯 class 控制显隐：el.classList.add('d-none')隐藏，el.classList.remove('d-none').classList.add('show')显示（注意先后顺序） - 【兼容旧逻辑】监听
closed.bs.alert事件，在回调中阻止默认移除：el.addEventListener('closed.bs.alert', e => e.preventDefault())，再手动恢复类名
关键细节：
-
d-none是隐藏前提，但仅靠它没有动画；要淡入得加show，且元素必须已有fade - 重复显示前，务必先清除旧状态：
el.classList.remove('alert-success', 'alert-danger')，再加新类型类
多个 Alert 共存时如何分别控制倒计时
用通用选择器如 $('.alert') 或 document.querySelectorAll('.alert') 会导致所有警告框一起关闭，或者只关第一个——因为 alert('close') 对 NodeList 不生效，且没指定上下文。
安全做法是绑定到具体 ID 或带语义 class 的容器：
- 给每个 Alert 加唯一 ID：
<div id="api-error-alert" class="alert fade show"> <li>表单提交成功后，只操作对应提示：<code>document.getElementById('submit-success-alert').alert('close') - 如果动态生成 Alert，不要用
innerHTML +=拼接，改用document.createElement+id设置，确保每次引用的是同一个节点
容易被忽略的点：多个 Alert 共享同一套 CSS 动画时，transition 时间必须一致；否则有的快、有的慢，视觉上会错乱。统一配在 .alert.fade 上最稳。
