alert 消失时进度条需与销毁生命周期同步：通过 data-dismiss-delay 设置倒计时，js 动态更新 width 并监听 transitionend 确保动画完成后再移除 dom。
Alert 消失时进度条不跟随动画节奏
Bootstrap 的 .alert 默认没有内置进度条，强行用 transition 控制 opacity 或 height 会和进度条不同步——因为进度条是独立 DOM 元素，它的宽度变化需要和 alert 的销毁生命周期对齐。关键不是“加动画”，而是“绑定销毁倒计时”。
- 别用
setTimeout直接remove()，否则进度条刚走到 80% 就没了 - 进度条应使用
width+transition，而非@keyframes，便于 JS 动态控制终止点 - 务必监听
transitionend事件而非固定延时，避免浏览器卡顿时进度条残留
用 CSS 自定义进度条并嵌入 Alert 结构
Bootstrap 5+ 的 Alert 支持自定义内容，把进度条作为子元素插入最顶部即可。不需要修改 Bootstrap 源码，也不依赖额外插件。
<div class="alert alert-warning"> <div class="alert-progress"></div> <h4 class="alert-heading">注意！</h4> <p>这是一条带自动消失进度条的警告框。</p> </div>
对应 CSS 要确保进度条贴顶、无边框、高度固定，并启用过渡：
.alert {
position: relative;
overflow: hidden;
}
.alert-progress {
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 100%;
background-color: #ffc107;
transition: width 3s linear;
}
JS 控制进度条与自动移除同步执行
核心逻辑：启动一个 3 秒倒计时，每 50ms 更新一次 width；时间到后触发移除，且必须等 transitionend 完成后再真正从 DOM 删除，否则动画中断。
- 用
requestAnimationFrame替代setInterval更平滑，但简单场景用setTimeout+ 线性计算也够用 - 给
.alert添加data-dismiss-delay="3000"可复用，避免硬编码 - 移除前先加
.fading类触发动画类名，让 opacity 渐隐更自然 - 务必检查
offsetParent === null防止重复执行
简短示例：
function initAutoDismiss(alertEl) {
const delay = parseInt(alertEl.dataset.dismissDelay) || 3000;
const progress = alertEl.querySelector('.alert-progress');
let start = null;
<p>function step(timestamp) {
if (!start) start = timestamp;
const progressWidth = Math.max(0, 100 - ((timestamp - start) / delay) * 100);
progress.style.width = <code>${progressWidth}%</code>;
if (progressWidth > 0) requestAnimationFrame(step);
else alertEl.classList.add('fading');
}</p><p>alertEl.addEventListener('transitionend', () => {
if (alertEl.classList.contains('fading')) {
alertEl.remove();
}
});</p><p>requestAnimationFrame(step);
}</p><p>document.querySelectorAll('.alert[data-dismiss-delay]').forEach(initAutoDismiss);</p>
兼容 Bootstrap 4 和 5 的 class 冲突处理
Bootstrap 4 的 .alert 默认有 padding，而进度条用了 position: absolute，容易被遮挡；Bootstrap 5 移除了部分默认 padding，但引入了 --bs-alert-padding-y CSS 变量。必须显式重置上内边距。
- 在
.alert上加padding-top: 4px（进度条高度 + 一点余量） - 避免用
!important，改用更高优先级选择器如.alert .alert-progress + *微调后续内容位置 - 如果项目用了 RTL（右向文本），需额外设置
right: 0并清除left，否则进度条跑右边 - 移动端 Safari 对
transition的width支持稳定，但旧版 Android Webview 需要-webkit-transition
真正麻烦的是：进度条本身不能响应鼠标悬停暂停——这不是 CSS 能解决的，得靠 JS 暂存 timer 并监听 mouseenter/mouseleave，这个细节多数人会忽略，直到用户反馈“为什么我一碰它就消失了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
