@starting-style 已被 w3c 移除且所有主流浏览器忽略，弹窗淡入应改用 dialog + visibility + transition 方案，配合 step-end 和强制重排确保动效生效。
@starting-style 不能解决弹窗入场动画失效问题，它在所有主流浏览器中均不生效，且已被 W3C 正式移除。
为什么 @starting-style 在弹窗场景下完全不可用
你写 @starting-style 后看不到任何效果，不是代码写错了，而是浏览器压根不解析它。Chrome 124+、Firefox 125+、Safari 17.4+ 全部忽略该规则，DevTools 的 Styles 面板里查不到，getComputedStyle() 也读不到它声明的值。它曾试图定义“动画前一帧”的样式，但因与现有层叠逻辑冲突，规范已将其从 Animations Level 4 中删除。
常见误判现象包括：
- 弹窗首次
[open]时opacity瞬间跳到 1，无淡入 - 手动加了
transition: opacity 0.3s，但初始渲染就是opacity: 1，动效根本没机会触发 - 以为要配合
@keyframes使用，结果发现@starting-style并不控制动画起始帧，也不影响animation行为
dialog 元素 + visibility + transition 是目前最可靠纯 CSS 方案
关键不是等未来特性，而是利用浏览器对 visibility 和 transition 的确定性支持。现代 <dialog></dialog> 元素天然支持 showModal()，配合以下 CSS 即可实现无 JS 触发的淡入：
dialog {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s step-end;
}
dialog[open] {
opacity: 1;
visibility: visible;
}
step-end 是必须的：它确保 visibility 在过渡全程保持 hidden，直到最后一帧才变为 visible，避免点击穿透或布局抖动。
注意点：
- 不能用
display: none替代visibility: hidden，否则 transition 失效 - 必须同时声明
opacity和visibility的 transition，缺一不可 -
<dialog></dialog>在 Safari 中需启用实验性功能（dialog元素本身支持，但showModal()的部分行为有差异）
动态插入弹窗时，必须手动触发重排才能启用 transition
如果你用 document.createElement('dialog') 创建弹窗再立即设 open，transition 仍会失效——因为浏览器来不及在样式计算阶段捕获初始状态。此时必须强制重排：
const dialog = document.createElement('dialog');
document.body.append(dialog);
// 强制触发 layout，让浏览器“看到”初始 opacity: 0 状态
getComputedStyle(dialog).opacity;
dialog.showModal();
这个技巧比 setTimeout 更精准，不依赖时间猜测；比 requestAnimationFrame 更早介入渲染管线，确保 transition 上下文已建立。
容易被忽略的细节：
- 重排必须在
showModal()或设置open属性之前执行 - 读取任意已声明的可计算属性都可触发（如
offsetHeight、clientWidth），但推荐读opacity语义更清晰 - 若弹窗内容含异步加载（如图片、组件），需确保内容渲染完成后再执行重排，否则可能读到未应用的样式
真正能落地的方案，永远建立在浏览器已实现的行为上，而不是规范草案里的名字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
