必须用自定义DOM弹窗实现淡入淡出动画，因原生alert()是操作系统级阻塞对话框，无法被CSS或JS干预；需结合opacity/visibility、transition及正确时机控制（如void offsetWidth强制重排）来实现。
HTML原生alert()不能加动画，必须用自定义弹窗
浏览器内置的 alert() 是阻塞式系统对话框，完全由操作系统控制，DOM、CSS、JS 都无法干预它的样式或行为。想实现淡入淡出，唯一办法是自己写一个 DOM 弹窗，并禁用原生 alert()。
常见错误是试图给 alert() 加 CSS 过渡——根本无效，控制台也不会报错，只是静静失效。
推荐做法：用 <div> 模拟对话框，配合 <code>opacity 和 transform 实现淡入淡出，再用 transition 控制时长。
淡入淡出的关键 CSS 属性和时机控制
动画效果依赖两个状态切换：隐藏态（opacity: 0; visibility: hidden;）和显示态（opacity: 1; visibility: visible;）。注意必须同时用 visibility，否则 opacity: 0 仍会响应点击、占据布局空间。
立即学习“前端免费学习笔记（深入）”；
过渡要加在弹窗容器本身，而不是内部文字或按钮：
dialog-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s;
}
dialog-overlay.show {
opacity: 1;
visibility: visible;
}
触发显示时，先加 .show 类，浏览器重排后动画才开始；隐藏时同理，但需在 transitionend 后移除类，避免 DOM 残留。
容易踩的坑：
- 只设
opacity过渡，没配visibility→ 点不到背后的页面，也点不到弹窗按钮 - 用
display: none切换 →display不支持过渡，动画直接跳变 - 忘记给父层加
position: fixed和z-index→ 弹窗位置飘、被遮挡
JavaScript 控制显示/隐藏的最小可行逻辑
核心不是“怎么写动画”，而是“什么时候触发状态变更”。要用 setTimeout 或 requestAnimationFrame 确保 class 切换发生在下一帧，否则浏览器可能合并操作，动画不触发。
示例函数（无框架）：
function showAlert(msg) {
const overlay = document.getElementById('alert-overlay');
const text = document.getElementById('alert-text');
text.textContent = msg;
// 先确保隐藏态
overlay.classList.remove('show');
void overlay.offsetWidth; // 强制重排，清空上一次状态
// 再触发显示
overlay.classList.add('show');
}
function hideAlert() {
const overlay = document.getElementById('alert-overlay');
overlay.classList.remove('show');
overlay.addEventListener('transitionend', function handler() {
if (!overlay.classList.contains('show')) {
overlay.removeEventListener('transitionend', handler);
}
}, { once: true });
}
注意点：
-
void offsetWidth是轻量级强制重排技巧，比getComputedStyle更快 - 隐藏监听用
{ once: true }防止重复绑定 - 不要在
hideAlert里直接remove()元素 —— 会影响后续复用
移动端适配和键盘焦点容易被忽略
桌面端按 Enter 关闭弹窗很自然，但移动端没有 Enter 键，必须显式提供「确定」按钮并绑定 click。更关键的是：弹窗出现后，焦点必须落到按钮上，否则屏幕阅读器用户和键盘用户无法操作。
实操建议：
- 弹窗显示后立即
button.focus() - 按
Escape键关闭弹窗：document.addEventListener('keydown', e => e.key === 'Escape' && hideAlert()) - 背景层加
inert属性（现代浏览器）或用aria-hidden="true"+ 手动禁用 tab 键遍历 - 动画时长别超过 300ms，否则在低端安卓机上容易卡顿或掉帧
真正难的不是让弹窗“动起来”，而是让它在各种设备、各种交互方式下都可访问、可预测、不打断用户流。动画只是表象，焦点管理、语义 HTML、渐进增强才是落地时最常翻车的地方。
