dialog 默认用 open 属性无法触发 css 过渡动画，因布尔属性切换无中间状态；需改用 is-open class 控制 opacity 和 transform 动画，并分步操作 dom 与样式。
dialog 默认设 open 属性时无法触发 CSS 过渡动画，因为 open 是布尔属性，切换无中间状态——浏览器不会从“未渲染”到“已渲染”之间插帧。想实现淡入，必须放弃只靠 open 控制显隐的思路，改用 class 驱动过渡。
为什么直接写 dialog[open] { opacity: 1; transition: opacity 0.3s; } 没用
常见错误现象：弹窗一出现就“啪”地显示，毫无过渡。原因有二：
-
dialog初始未插入文档流或未渲染时，opacity: 0根本没生效，浏览器无起点可过渡 -
[open]伪类匹配是原子操作，不产生重绘中间帧，transition被跳过 - 即使写了
dialog { opacity: 0; transition: opacity 0.3s; }，但 DOM 尚未 ready 或样式未加载完成，初始值可能被忽略
正确写法：用 is-open class 控制动画，open 仅保留语义
打开逻辑必须分两步：先加 class 触发过渡，再设 open；关闭则相反。CSS 要显式定义起始和结束态：
dialog {
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
dialog.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
对应 JS（以 showModal() 为例）：
- 打开：
dialog.classList.add('is-open'); dialog.showModal(); - 关闭：监听
close或cancel事件，dialog.classList.remove('is-open');，再等transitionend后调用dialog.close()
::backdrop 淡入必须单独处理，且 Safari 需兼容
dialog::backdrop 是伪元素，不继承父级 transition，必须显式声明：
dialog::backdrop {
background: rgba(0, 0, 0, 0);
transition: background 0.3s ease;
}
dialog.is-open::backdrop {
background: rgba(0, 0, 0, 0.6);
}
注意点：
- Safari 15.4+ 才原生支持
::backdrop，旧版需运行时检测并 fallback 到自定义遮罩层 - 不能只靠
background过渡，若还用了backdrop-filter，得同步控制其值（如从blur(0)→blur(4px)） -
dialog必须是直接子元素，否则 backdrop 可能不渲染或样式失效
最易被忽略的是：动画时间必须落在 0.25–0.4s 区间，太短人眼无感，太长拖慢交互；且 pointer-events: none → auto 不可过渡，必须靠 class 切换时机卡准用户可点击的瞬间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
