用 transform: scale() 实现弹窗展开可避免重排、保持圆角清晰与阴影自然，因 scale 是 gpu 合成层操作，仅重绘不重排，文字边框缩放后仍锐利；需设 transform-origin: center、配合 opacity 过渡，并注意遮罩同步、移动端适配及 js 安全控制。
直接用 transform: scale() 实现弹窗展开，不改 width/height，就能避开重排、保持圆角清晰、阴影自然、动画丝滑。关键不是“变大”，而是“视觉上等比放大”，同时布局占位不变——这对弹窗这种需要精准定位、频繁触发的交互特别重要。
为什么不用 width/height 做弹窗展开
改 width 或 height 会强制浏览器重新计算整个盒模型：父容器要重排、子元素位置要重算、border-radius 会被拉扯变形、box-shadow 可能错位或模糊。尤其在中低端安卓机或微信 WebView 里，一卡一卡的；而 scale() 是纯 GPU 合成层操作，只重绘不重排，60fps 更稳，缩放后文字、边框、圆角全按比例变化，边缘依然锐利。
核心写法：从 center 居中放大 + 平滑过渡
弹窗默认隐藏（opacity: 0; visibility: hidden;），展开时用 scale 模拟“弹出感”：
- 给弹窗容器设固定尺寸（如 width: 400px; height: 300px），并加 transform-origin: center center，确保从正中心展开
- 初始状态写 transform: scale(0.8) + opacity: 0，避免 Safari 首次渲染闪动
- 展开态设 transform: scale(1) + opacity: 1，配合 transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s
- 别只写
transition: all—— 明确写transform和opacity，防止其他属性意外参与过渡
进阶细节：遮罩层同步、移动端适配、JS 安全控制
真实项目中，光缩放弹窗还不够：
- 背景遮罩层（mask）建议用 scale(1) 固定铺满，靠 opacity 控制显隐，避免它也缩放导致点击区域偏移
- 移动端需确认 已开启，否则双指缩放可能被拦截；但弹窗自身的 scale 动画不受影响
- JS 触发时，别用
el.style.transform += ' scale(1.1)'—— 易重复叠加失效；推荐统一维护状态：el.style.transform = `scale(${s}) translate(${x}px, ${y}px)`，每次覆盖写全 - 若弹窗内有表单或按钮，缩放后热区不变（layout size 不变），但视觉变大了，用户点击反馈更友好；如需强化交互感，可搭配
opacity: 0.98或轻微filter: blur(0.2px)微调
慎用场景与替代思路
scale() 不是万能的：
- 如果弹窗展开后必须撑开父容器（比如嵌在 flex 布局里要影响兄弟元素），scale() 就不合适——此时得用
max-height过渡或 JS 测量高度后设置height - 缩放后内容文字变大，但语义尺寸没变，对屏幕阅读器无额外提示；如需可访问性增强，可同步加
aria-expanded="true"和动态inert属性 - SVG 弹窗或 Canvas 内容慎用 scale()，可能引起坐标系偏移或像素模糊；优先对容器
<g></g>或外层 div 应用变换
