必须用 transform: scale() 配合 transform-origin 控制缩放中心，opacity 与 transform 同属一个 transition 声明；禁用 display 切换，改用 visibility + opacity + transform 组合；推荐 cubic-bezier(0.25, 0.46, 0.45, 0.94) 实现快进慢出，并添加 translatez(0) 触发硬件加速。
scale + opacity 过渡必须配合 transform-origin
直接写 transition: scale 0.3s, opacity 0.3s 不会动——CSS 不认识 scale 这个属性名。真正起作用的是 transform: scale()，而它的缩放中心默认是元素中心（transform-origin: center）。如果弹窗内容靠左或顶部对齐，缩放时会“漂移”，看起来像错位。
- 弹窗容器必须设
transform-origin: center（居中缩放）或按需设为top left -
opacity要和transform放在同一个transition声明里，否则可能不同步 - 初始状态用
opacity: 0; transform: scale(0.8)，避免从 1 缩小导致闪一下
display: none 会中断 transition，改用 visibility 或 fixed 定位控制显隐
常见错误：JS 切换 display: none ↔ display: block，动画直接消失。因为 display 是不可过渡属性，浏览器一渲染就跳变。
- 用
visibility: hidden+opacity: 0+transform: scale(0.95)组合隐藏，再用visibility: visible触发过渡 - 确保弹窗始终在文档流外（
position: fixed），否则scale可能挤压周围布局 - 不要在
transition中包含visibility——它只做开关，不参与过渡
transition-timing-function 对「弹出感」影响远超 duration
0.3s 是常见时长，但用 ease 会显得拖沓，用 linear 又太机械。真实弹窗需要「快进慢出」的物理感。
- 推荐
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似ease-out但更轻快） - 进出场最好用不同缓动：
opacity适合ease-in-out，transform适合带弹跳感的自定义贝塞尔曲线 - 避免全写成
all 0.3s ease——all会把没改的属性也纳入过渡，可能引发意外重绘
移动端 Safari 的 transform 3D hack 仍有必要
iOS 15–16 的 Safari 对纯 2D transform: scale() 过渡偶发卡顿或跳帧，尤其在低配设备上。
- 强制开启硬件加速：把
transform: scale(1)改成transform: scale(1) translateZ(0) - 仅对弹窗最外层容器加，别滥用到所有子元素，否则触发过多图层合成
- 不需要加
-webkit-前缀了，但translateZ(0)在 Safari 上依然比translateX(0)更稳
transform-origin 和 cubic-bezier 的组合调试，不是套个 scale 就完事。很多人漏掉 visibility 控制，结果 JS 一调 show() 就闪现，根本看不到过渡。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
