应使用 opacity 与 visibility 配合 transition 实现平滑提示条显示/隐藏：初始设 opacity: 0; visibility: hidden;，显示时改为 opacity: 1; visibility: visible;，并声明 transition: opacity 0.25s ease, visibility 0s 0.25s;，禁用 display 切换。
错误提示条闪现过快，本质是 opacity 从 0 突然变为 1（或反之），缺少视觉缓冲。用 transition: opacity 可以让显示/隐藏过程平滑，用户能看清内容。
确保 opacity 和 visibility 配合使用
CSS 的 opacity: 0 只是“看不见”，元素仍占位、可交互；而 visibility: hidden 不占位但也不触发过渡。正确做法是：
- 初始状态设为
opacity: 0; visibility: hidden; - 显示时改为
opacity: 1; visibility: visible; - 同时在类上声明
transition: opacity 0.2s ease-in-out, visibility 0s 0.2s;（visibility 延迟切换，避免瞬间消失）
避免 display: none 直接切换
display 属性无法过渡，一旦设为 none，transition 立即中断。即使你写了 transition，只要 JS 或 class 切换中用了 display: none/block，opacity 过渡就失效。应全程用 opacity + visibility 控制显隐。
JS 触发时注意时机和类名顺序
如果用 JS 添加/移除类来控制显示，需确保：
立即学习“前端免费学习笔记（深入）”；
- 类名变更后不立刻强制重排（如读 offsetHeight），否则过渡可能被跳过
- 显示逻辑建议：先加类（含
opacity: 1; visibility: visible;），再稍作延迟（setTimeout(() => {}, 0)）确保样式计算完成 - 隐藏逻辑建议：先移除类（回到
opacity: 0），再监听transitionend事件，在结束时设置visibility: hidden（更稳妥）
补一个实用的 CSS 类模板
直接复制可用：
.alert-fade {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0s 0.25s;
}
.alert-fade.show {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
JS 中只需 el.classList.add('show') 或 remove('show') 即可。
基本上就这些。不复杂但容易忽略 visibility 的配合和 display 的陷阱。
