alert()无法实现动画因其为浏览器原生阻塞式弹窗，不进入DOM渲染流程，CSS过渡无效；应改用或自定义配合类名切换、transform/opacity及transitionend监听来实现淡入缩放等动效。
用 它由浏览器原生实现，不经过 DOM 渲染流程，JS 调用后直接阻塞脚本、弹出系统级窗口，CSS 完全无效。你写再多 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 立即学习“前端免费学习笔记（深入）”；alert() 根本做不了动画，必须放弃它；想加淡入、缩放、滑入效果，得用 <dialog></dialog> 或自定义 <div> + <code>transform + opacity + 类名切换。
为什么
alert() 无法加动画transition 或 @keyframes 都不会触发——连元素都没挂载到页面里。
alert("提交成功") 点击后“啪”一下出现、“啪”一下消失，毫无过渡感
<dialog></dialog> 动画失效的真正原因<dialog></dialog> 的 open 属性是布尔开关，不是 CSS 可过渡属性。浏览器对 open=true 的处理是立即渲染，没有中间状态，transition 自然不生效。
dialog[open] { opacity: 1; transition: opacity 0.3s; }——这行不通open 语义（用于无障碍和 showModal()），但动画靠类名（如 is-open）驱动opacity: 0; transform: scale(0.95) translateY(10px); pointer-events: none;
dialogEl.classList.add("is-open")，再 dialogEl.showModal()
dialogEl.classList.remove("is-open")，监听 transitionend 后再调用 dialogEl.close()
给
<dialog></dialog> 的 ::backdrop 加淡入效果::backdrop 是伪元素，不能直接加 class，但可以对其 background 做过渡——前提是初始透明度明确设为 rgba(0,0,0,0)，而不是留空或用 transparent（后者在部分浏览器中不触发过渡）。
dialog::backdrop { background: rgba(0,0,0,0); transition: background 0.25s ease; }
is-open 状态时，用 dialogEl.style.backdropFilter = "blur(0)" 或仅靠背景色变化即可::backdrop，需 fallback：用额外 <div class="backdrop"> 模拟，并同步控制显隐
<li>别忘了加 <code>will-change: backdrop-filter 或 will-change: background 提升低端设备表现自定义
<div> 弹窗的最小可靠动效结构
<p>不依赖 <code><dialog></dialog> 时，核心是「先让元素进流，再触发动画」。直接 display: none → block 会跳过过渡，必须分两步。
- HTML 中保持弹窗节点存在，初始加
class="modal is-closed" - CSS 初始态：
.modal { opacity: 0; transform: scale(0.9) translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; } - 打开逻辑：
modalEl.classList.remove("is-closed");（不要设display） - 关闭逻辑：监听
transitionend，检查event.propertyName === "opacity"后再modalEl.classList.add("is-closed") - 遮罩层必须设
position: fixed; z-index: 1000;，内容区用transform: translate(-50%, -50%)居中，比top/left更稳定
最容易被忽略的是：动画结束后的清理时机。很多人在关闭时立刻 remove() 或设 display: none，结果动画根本没跑完就删了节点。真正的平滑体验，取决于你是否愿意多写那几行 transitionend 监听和状态判断。
