原生 alert() 无法加动画，因其是浏览器强制同步阻塞的 UI 组件，无 DOM 节点、不参与 CSS 渲染，任何 CSS 动画均无效；必须用自定义 modal（div + fixed 定位）替代，通过 class 切换触发动画，配合 opacity 与 transform 实现平滑缩放淡入，并确保焦点管理、Esc 关闭、ARIA 属性等无障碍支持。
原生 alert() 无法加动画，这是根本限制
浏览器强制同步阻塞的 alert() 没有 DOM 节点、不参与 CSS 渲染流程，任何 CSS 动画、transition 或 @keyframes 对它完全无效。你看到的“弹出”只是浏览器 UI 的原生行为，开发者无权干预。
用自定义 modal 替代 alert() 才能控制动画
必须放弃原生对话框，用 div + position: fixed + z-index 模拟，并手动管理显示/隐藏逻辑。关键点：
- 动画触发靠切换 class（如
show/hidden），而非直接改display或visibility - 使用
opacity+transform: scale()组合实现平滑缩放淡入，避免重排 - 动画结束后再移除 DOM 或设
display: none，否则动画会立即中断 - 务必禁用背景滚动：
document.body.style.overflow = 'hidden'，关闭时恢复
示例结构：
<div id="alert-modal" class="modal hidden">
<div class="modal-overlay"></div>
<div class="modal-content">
<p>⚠️ 操作不可撤销</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<button onclick="closeAlert()">确认</button>
</div>
</div>
CSS 动画部分：
.modal-content {
transform: scale(0.8);
opacity: 0;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.25s;
}
.modal.show .modal-content {
transform: scale(1);
opacity: 1;
}
注意焦点与可访问性（容易被忽略）
纯视觉动画不是全部。用户按 Tab 或用屏幕阅读器时，必须保证：
- 弹出时自动将焦点移到 modal 内首个可聚焦元素（如按钮）
- 按
Esc键可关闭，且关闭后焦点回到触发按钮 - 添加
role="alertdialog"、aria-modal="true"和aria-labelledby - 背景内容需设
aria-hidden="true"（modal 显示期间）
否则动画再顺滑，对键盘或残障用户也是不可用的。
动画本身只是表层，真正难的是交互闭环和无障碍保障。
