加了 fade 不淡出是因为缺少 show 类或结构错误：fade 提供过渡声明，show 触发过渡起点；data-dismiss="alert" 必须保留以启用动画流程；自动关闭需先移除 show 类再监听 transitionend 事件清理。
为什么加了 fade 还是不淡出？
常见现象：警告框点击关闭按钮后直接消失，没有过渡动画。根本原因不是 JS 没写对，而是 HTML 结构或类名缺失。Bootstrap 4 的淡出动画依赖两个 CSS 类同时存在：fade 和 show——缺一不可。fade 提供 opacity 过渡声明，show 则让元素初始可见并触发过渡起点。如果只加 fade、没加 show，或者用 d-none 替代 show 控制显隐，动画根本不会启动。
data-dismiss="alert" 必须保留，且不能删掉关闭按钮
Bootstrap 4 的关闭逻辑由 data-dismiss="alert" 属性驱动，它不只是“绑定点击”，更是初始化内部事件委托的开关。删掉这个属性，即使手动调用 $(element).alert('close')，也会静默失败或直接移除 DOM 而不走动画流程。
- 关闭按钮必须是
<button type="button">，不能用<a>或无语义<div> - 按钮需在
.alert-dismissible容器内，该类提供右侧 padding 预留空间 - 按钮里用
×（× 符号），不是文字 "close" 或 SVG 图标（除非重写 CSS）
JS 触发自动关闭时别直接 remove()
想 3 秒后自动关闭？不能这样写：setTimeout(() => el.remove(), 3000)。那会跳过所有 CSS 过渡，突兀消失。正确路径是交由 Bootstrap 的动画机制接管：
- 确保元素已有
fade show类（初始就加上，不要 JS 动态加） - 用
setTimeout移除show类：el.classList.remove('show') - 监听
transitionend事件，且只在e.propertyName === 'opacity'时执行清理 - 清理动作推荐
el.remove()，或el.classList.add('d-none')+ 手动清空内容（如需复用）
示例片段：
立即学习“前端免费学习笔记（深入）”；
const alertEl = document.querySelector('.alert');
setTimeout(() => {
alertEl.classList.remove('show');
}, 3000);
alertEl.addEventListener('transitionend', (e) => {
if (e.propertyName === 'opacity' && !alertEl.classList.contains('show')) {
alertEl.remove();
}
});
CSS 干扰点常被忽略
即使结构全对，也可能因外部样式覆盖导致过渡失效。重点检查：
- 是否被其他 CSS 覆盖了
.alert.fade的transition声明？默认是transition: opacity .15s linear; - 父容器是否设置了
overflow: hidden，把半透明阶段的元素裁剪掉了？ - 是否误加了
!important在opacity: 0上，破坏了过渡链？ - DevTools 中手动删掉
show类，看元素是否开始淡出——这是最快速的验证方式
动画节奏卡在 0.5 透明度不动？大概率是 transitionend 监听没过滤 propertyName，被 margin/padding 变化误触发了多次。
