应使用@keyframes定义alert-fade-out淡出动画，配合transform避免点击残留，并用setTimeout或animationend在动画结束后移除元素或设display:none，禁用Bootstrap的.fade类以防冲突。
用 @keyframes 定义淡出动画，别依赖 Bootstrap 自带动画类
Bootstrap 5 的 .alert 组件本身不提供自动隐藏或淡出能力，.fade 类只控制初始显示/隐藏状态，且需手动触发 .show，它不是持续动画。要实现「显示后几秒自动淡出」，必须自己写 CSS 动画 + JavaScript 控制生命周期。
推荐定义一个纯 CSS 的淡出动画，不耦合 JS 逻辑：
@keyframes alert-fade-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
注意两点：一是加 transform 避免单纯改 opacity 导致点击区域残留；二是动画名用连字符分隔（alert-fade-out），避免和 Bootstrap 内部类冲突。
给警告框添加动画并用 setTimeout 触发移除
不能只加动画类就完事——CSS 动画播完后元素仍存在、仍占布局空间、仍可交互。必须在动画结束时移除元素或设 display: none。
立即学习“前端免费学习笔记（深入）”；
实操建议如下：
- 给
<div class="alert">添加一个临时类（如alert-autohide），该类绑定动画和时长 - 用
setTimeout在动画时长（如 300ms）后移除元素，或切换为display: none - 监听
animationend事件更稳妥，但要注意浏览器兼容性（IE 不支持，不过 Bootstrap 5 本就不支持 IE）
示例代码：
const alertEl = document.querySelector('.alert');
alertEl.classList.add('alert-autohide');
setTimeout(() => {
alertEl.remove(); // 或 alertEl.style.display = 'none';
}, 300);
对应 CSS：
.alert-autohide {
animation: alert-fade-out 0.3s ease-out forwards;
}
避免和 Bootstrap 的 .fade 类冲突
如果同时用了 Bootstrap 的 .fade 和自定义动画，可能因 CSS 优先级或 opacity 覆盖导致动画失效或闪烁。
解决办法很直接：
- 彻底不用
.fade类——它只为配合.show做显隐过渡，和自动淡出目标不一致 - 确保自定义动画规则的
opacity和transform不被其他样式覆盖（可加!important，但更推荐提高选择器特异性） - 若警告框是动态插入的（如 AJAX 后创建），务必在插入 DOM 后再加动画类，否则动画可能不触发
移动端 Safari 上 animationend 可能不触发，优先用 setTimeout
iOS Safari 对 CSS 动画事件的支持有历史问题，尤其当动画时长极短（animationend 很容易丢失。而 setTimeout 简单可靠，误差在毫秒级，对 UI 体验无感。
所以除非你明确需要响应动画中断（比如用户手动关闭），否则不要为了“精确”去监听事件。直接按动画声明的时长配 setTimeout 更稳。
另外，别忘了给动画加 forwards 填充模式，否则动画播完会闪回初始状态，导致移除前有一帧异常。
