transform: scale() 是实现弹窗缩放动画最直接、性能最好的方式，但起始值不宜设为 scale(0)，应选 0.8–0.9 并配合 opacity 控制；须用 animation-fill-mode: forwards 锁定终态，JavaScript 需监听 animationend 再清理 DOM；Popover API 虽原生支持但需手动补缩放动画样式。
transform: scale() 是实现弹窗缩放动画最直接、性能最好的方式，但只写 scale(1) 和 scale(0) 会出问题——元素缩到 0 尺寸后，内部按钮可能失焦、文字渲染异常，甚至动画卡住。
为什么不能用 display: none 或 visibility: hidden 配合 scale
这两个属性一设就“立即生效”，浏览器跳过整个动画过程。哪怕你写了 transition: transform 0.3s, opacity 0.3s，只要 display 变了，transform 动画根本不会触发。
常见错误现象：弹窗“啪”一下闪现或直接消失，没有过渡。
正确做法是全程靠 opacity + transform 控制显隐，再用 visibility: hidden 做兜底（仅在动画结束后设置），避免点击穿透。
@keyframes 起始值别设成 scale(0)
设成 scale(0) 后，元素宽高为 0，内部文本、表单控件可能被强制重排，导致 Safari 下动画卡顿，或 Chrome 中首次点击按钮无响应。
实操建议：
• 起始 scale 推荐用 0.8 或 0.9，视觉上仍是“从无到有”，但保留可交互尺寸
• 必须同时控制 opacity，否则缩放过程中内容会糊成一团
• 示例关键帧：
@keyframes modal-fade {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
动画结束后的状态必须用 animation-fill-mode: forwards 锁住，否则会回弹。
JavaScript 触发时要等 animationend 再清理 DOM
很多人加完 .show 类就以为完事了，结果快速连点两次，弹窗状态错乱。
关键点：
• 添加类后，不要立刻操作 DOM，先监听 animationend
• 隐藏时，监听的是弹窗容器本身的 animationend，不是遮罩层
• 动画结束后才移除类或设置 display: none，否则下一次打开会丢失初始状态
• 示例逻辑片段：
modalEl.addEventListener('animationend', () => {
if (!modalEl.classList.contains('show')) {
modalEl.style.display = 'none';
}
});
Popover API 已原生支持缩放，但需手动补样式
2025 年起主流浏览器已支持 popover 属性，它自动处理焦点、ESC 关闭、点击外部关闭等逻辑，但默认没有动画。
要加缩放效果，只需给 [popover] 元素加 CSS：
[popover] {
animation: modal-fade 0.25s ease-out forwards;
}
[popover]:popover-open {
animation-name: modal-fade-reverse;
}
注意：:popover-open 伪类只在打开状态下生效，且部分旧版 Chrome 需加 -webkit- 前缀；如果项目还需兼容 Safari 17 以下版本，仍得回退到 class 控制方案。
缩放动画看着简单，真正卡住人的往往是起始值选择、DOM 清理时机和伪类兼容性这三处——它们不报错，但会让动画“看起来不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
