用transition+opacity控制进度条淡出，本质是状态变化触发样式过渡，需等width达100%后再启动opacity动画，推荐用.done类统一控制，并为opacity设置0.2s延迟以确保宽度动画收尾再淡出。
用 transition + opacity 控制淡出时机
进度条加载完成后的淡出，本质是「状态变化触发样式过渡」。关键不在“怎么动”，而在于“什么时候开始动”——必须等 width（或 transform）到达 100% 后，再启动 opacity 动画，否则会边涨边透明，视觉上像“没填满就消失了”。
推荐做法：用一个 class 表示“已完成”，比如 .done，它同时控制宽度归位和透明度归零：
.progress-bar {
height: 6px;
background: #e0e0e0;
border-radius: 3px;
overflow: hidden;
}
.progress-bar::before {
content: '';
display: block;
height: 100%;
width: 0%;
background: #4caf50;
border-radius: 3px;
transition: width 0.4s ease-out, opacity 0.3s 0.2s ease-in; /* 宽度先动，0.2s 后 opacity 开始动 */
}
.progress-bar.done::before {
width: 100%;
opacity: 0;
}
注意两个细节：
• transition 中给 opacity 加了 0.2s 延迟，确保宽度动画基本收尾再开始淡出
• ease-out 用于宽度增长，更符合加载惯性；ease-in 用于淡出，避免突兀消失
用 @keyframes 实现更可控的淡出序列
如果需要精确控制淡出过程（比如先缩放再透明、或加轻微上浮），@keyframes 比纯 transition 更可靠，尤其当进度条本身靠 JS 动态更新 style.width 时，CSS 类切换可能被频繁覆盖。
实操建议：
- 把进度条宽度逻辑保留在 JS（如
el.style.width = progress + '%'），只用 CSS 类触发淡出阶段 - 定义独立的淡出动画，不和宽度动画耦合
- 动画结束后手动移除元素，避免 DOM 积压
@keyframes fadeOutUp {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}
.progress-bar.done {
animation: fadeOutUp 0.4s forwards;
}
JS 触发时机示例：if (progress >= 100) { bar.classList.add('done'); setTimeout(() => bar.remove(), 400); }
为什么不能只靠 transition: all？
常见错误是写 transition: all 0.3s，然后在 .done 里设 opacity: 0。问题在于：
• 如果进度条宽度还在 JS 中持续更新（比如每 50ms 改一次 style.width），浏览器会不断重置 transition，导致 opacity 动画被中断或延迟不一致
• all 会把所有属性都加过渡，比如 height 或 background-color 的意外变化也会触发动画，干扰主逻辑
所以必须显式声明：
• 只对 width 和 opacity 做过渡
• 明确指定 timing function 和 delay
• 避免用内联 style 控制需过渡的属性（改用 class 切换）
兼容性与性能提醒
opacity 和 transform 是 GPU 加速属性，淡出动画流畅；但 width 不是，频繁修改会触发重排（reflow）。所以：
- 优先用
transform: scaleX()替代width控制进度（需配合transform-origin: left） - IE10+ 支持
transition，但 IE 不支持transform上的transition-delay，若需兼容 IE，改用 JS 控制淡出时机 - 移动端要注意
will-change: opacity可能引发渲染层爆炸，仅在必要时加
真正难的不是写出淡出效果，而是让“完成判定”和“动画触发”在不同更新节奏下保持同步——JS 更新 width、CSS 过渡 width、CSS 触发动画，三者时间轴一旦错开，用户就会觉得“卡了一下才消失”或者“还没满就没了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
