加了fade类警告框仍硬切，最常见原因是漏掉show类或fade与show未共存；.alert.fade提供过渡属性，仅.alert.fade.show才触发初始可见与关闭动画。
为什么加了fade类警告框还是硬切？
最常见原因是 HTML 中漏掉了 show 类，或者 fade 和 show 没同时存在。Bootstrap 的淡出动画依赖两个状态切换：.alert.fade 提供 transition: opacity .15s linear，而 .alert.fade.show 才真正触发初始可见态和后续关闭时的过渡流程。只写 fade，元素默认透明不可见；只写 show，则没有过渡属性，alert('close') 会直接移除节点，无动画。
.alert.fade 的 transition 值怎么改才安全？
别碰 all，也别全局覆盖 .fade。必须限定作用域：
-
.alert.fade { transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1); }—— 只影响警告框，不波及 tooltip 或 offcanvas - 动画时长别设为
0s，否则退化为硬切；也别超过.3s，否则在低端安卓 WebView 中易卡顿 - 如果想让淡出更“缓”，调
cubic-bezier第三个参数（例如0.8），比拉长时间更轻量
淡出后元素卡在半透明状态，CSS 上漏了什么？
这是典型的类名生命周期没对齐。Bootstrap 淡出流程是：show → 移除 show → fade 触发 opacity 过渡 → 过渡结束触发 closed.bs.alert。如果你手动加 d-none 或删 fade，就打断了这个链条：
- 不要在
closed.bs.alert回调里直接element.remove()或display: none - 正确做法是：监听事件后
e.preventDefault()，再用classList.remove('show').add('d-none') - 确保 CSS 中有
.alert.d-none { opacity: 0; }，否则浏览器可能保留上一帧的 opacity 值
反复显示同一个警告框时，为什么第二次没淡入？
因为上一次关闭后你只加了 d-none，但没恢复 show——而 Bootstrap 的淡入只响应从「无 show」到「有 show」的变化：
- 显示前必须先
classList.remove('d-none')，再classList.add('show') - 不能只靠
classList.toggle('show')，它不会处理d-none冲突 - 如果用了
bootstrap.Alert.getInstance(el).show()，它内部不会自动清理d-none，得你手动清
真正容易被忽略的是：淡入淡出不是独立动作，而是 fade、show、d-none 三者在 DOM 类名层的精确配合。少一个环节，动画就断在中间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
