Bootstrap警告框自动淡出需同时满足：HTML中含fade和show类、data-bs-dismiss属性、button关闭按钮；JS中须监听closed.bs.alert事件并preventDefault，再调用alert('close')，否则元素被删无法复用。
Bootstrap警告框默认不自动淡出，必须手动组合 fade 类、show 类、alert('close') 方法和 setTimeout，且关键在于阻止默认移除行为——否则元素被删，下次调用就失效。
必须同时满足的 HTML 结构条件
缺一不可，否则动画不触发或直接突兀消失：
-
class="alert alert-success alert-dismissible fade show"——fade和show必须共存，仅fade不会生效 - 保留
data-bs-dismiss="alert"属性（Bootstrap 5）或data-dismiss="alert"（Bootstrap 4），它不只是给关闭按钮用的，更是初始化插件实例的开关；删了alert('close')会静默失败 - 关闭按钮必须存在且类型为
button，不能是a或无语义div，否则事件委托可能不触发
JS 定时关闭的正确写法（避免元素被删）
直接调用 alert('close') 后，Bootstrap 默认会把整个 <div class="alert"> 从 DOM 中移除。想复用？得拦截这个销毁动作：
- 等 DOM 加载完成再执行，推荐用
document.addEventListener('DOMContentLoaded', () => { ... })，别在脚本顶部直接跑setTimeout - 用精确选择器，比如
document.getElementById('form-success-alert')，别用document.querySelectorAll('.alert')批量操作——多个警告框时极易误关 - 关闭前先监听
closed.bs.alert事件，并在回调里阻止默认移除：alertEl.addEventListener('closed.bs.alert', e => { e.preventDefault(); alertEl.classList.remove('show').add('d-none'); }); - 然后才触发关闭：
setTimeout(() => alertEl.alert('close'), 3000);
为什么只加 d-none 会卡在半透明状态？
CSS 动画依赖类名切换节奏。Bootstrap 的淡出流程是：show → 移除 show → 过渡中保持 fade → 动画结束触发 closed.bs.alert。如果跳过 alert('close') 直接加 d-none，fade 过渡没启动，opacity 停在中间值；如果删了 fade 类，连过渡属性都没注册。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：打开 DevTools，选中警告框元素，手动删掉
show类，观察是否开始淡出——没反应说明结构或类名漏了 - 动画时长由 CSS 控制：
.alert.fade { transition: opacity .15s linear; }，改这里可调速，但别设成 0s，否则退化为硬切 - 反复显示时，先确保清掉
d-none，再加回show：alertEl.classList.remove('d-none').addClass('show');
最稳的复用模式：静态 DOM + 类名控制 + 事件拦截
动态拼 HTML（比如 innerHTML += '<div class="alert">...</div>'）是高频翻车点：每次提交都新建节点，旧节点残留、新节点没绑定事件、CSS 类错乱。真正可靠的只有这一种：
- HTML 中只写一个警告框，带固定
id，例如<div id="global-alert" class="alert alert-info alert-dismissible fade show">...</div> - JS 全程只操作这个元素的类名：
classList.add('d-none')/classList.remove('d-none', 'show')/classList.add('show') - 关闭逻辑统一走
alert('close')+closed.bs.alert拦截，不手撕 DOM - 倒计时和手动关闭共用同一套显隐逻辑，避免两套状态不同步
容易被忽略的是：closed.bs.alert 是异步事件，监听必须在调用 alert('close') 之前注册；否则可能错过事件，元素照样被删。
