可行但需规避闪退：禁用scale(0)改用scale(0.95)+opacity:0+visibility:hidden；transform-origin: center须配合fixed+translate(-50%,-50%)；transition须统一声明transform与opacity，搭配cubic-bezier(0.25,0.46,0.45,0.94)及translateZ(0)。
直接用 transform: scale() 配合 opacity 做 iOS 风格消息弹窗是可行的，但默认写法大概率会“跳一下”或“闪退”——问题不在动画逻辑，而在初始状态和过渡控制没对齐。
为什么 scale(0) + opacity(0) 一加 class 就闪现再放大
因为浏览器把 scale(0) 当作“尺寸归零”，内部子元素（比如按钮、文字）失去渲染上下文，部分浏览器（尤其是 Safari）会在第一帧强制重绘，导致视觉跳变。这不是 bug，是渲染引擎对不可见元素的优化行为。
- 别用
scale(0)作为隐藏态，改用transform: scale(0.95)+opacity: 0+visibility: hidden - 显隐切换必须靠
visibility控制，display: none会中断整个 transition -
scale动画必须写在transform属性里，单独写transition: scale 0.3s无效——CSS 不识别scale这个属性名
如何让缩放中心精准落在弹窗正中
iOS 弹窗缩放时是“从中心炸开”，不是从左上角拉伸。如果弹窗本身 position 是 absolute 且靠左/靠顶定位，transform-origin 默认的 center 会失效——它仍以元素盒模型中心为基准，但视觉上会偏移。
- 给弹窗最外层容器设
transform-origin: center（前提是它有明确宽高或包裹内容） - 若弹窗用
position: fixed+top: 50%; left: 50%定位，必须同时加transform: translate(-50%, -50%)，否则transform-origin: center才真正生效 - 移动端 Safari 对纯
scale()渲染不稳定，建议统一写成transform: scale(0.95) translateZ(0)，所有关键帧都带上translateZ(0)
缓动函数怎么选才像 iOS 原生
iOS 的缩放动画不是匀速，也不是简单 ease-out，而是带一点“冲过头再回弹”的物理感。用默认 ease 会拖沓，linear 又太硬。
- 推荐贝塞尔曲线：
cubic-bezier(0.25, 0.46, 0.45, 0.94)（快进慢出，接近系统原生） -
opacity和transform必须共用一个transition声明，例如：transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 避免写
transition: all 0.3s ease——会把未改动的属性也纳入过渡，引发意外重绘
最容易被忽略的是：动画结束后，visibility: visible 必须已生效，否则即使 opacity: 1、scale(1)，点击事件也可能穿透或失焦。别依赖 JS 动画回调去补，静态 CSS 规则里就要写死最终态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
