transition: scale 0.3s不生效，因css无scale独立属性，必须写transition: transform 0.3s，并用transform: scale()起止值；需显式设transform-origin、避免display: none、配合opacity与visibility控制显示状态，并注意硬件加速与缓动函数优化。
直接用 transform: scale() 配合 transition 就能实现，但多数人写完发现“没动画”或“闪一下就出来”，问题基本出在属性组合、初始值或 DOM 状态控制上。
为什么 transition: scale 0.3s 不生效
CSS 没有 scale 这个独立属性——它只是 transform 的一个函数值。写成 transition: scale 0.3s 浏览器直接忽略，不报错也不动。必须写成 transition: transform 0.3s，且起始和结束状态都得用 transform: scale(...) 才会触发过渡。
- 错误写法：
transition: scale 0.3s; .modal { scale: 0.7; }（scale是 CSS 属性，但仅 Safari 支持，且不参与 transition） - 正确写法：
transition: transform 0.3s ease, opacity 0.3s ease;，配合transform: scale(0.7)→transform: scale(1) - 别漏掉
opacity：只缩放不改透明度，入场时内容会“硬切”出现，视觉突兀
缩放中心偏移、弹窗“飘走”怎么办
默认 transform-origin 是 50% 50%（中心），但如果弹窗本身靠左/靠顶定位，或用了 flex + align-items: flex-start，缩放时视觉中心和实际变换中心不一致，就会看起来像错位。
- 显式设置
transform-origin: center（或50% 50%），确保缩放锚点稳定 - 弹窗容器必须是
position: fixed或absolute，脱离文档流；否则scale可能挤压周围元素，导致布局抖动 - 如果内容框内文字或按钮有
text-align: left，缩放过程里文字渲染可能微偏——这不是 bug，是 subpixel 渲染差异，加translateZ(0)可缓解
隐藏后元素还在页面里，怎么彻底“清场”
opacity: 0 + transform: scale(0.7) 只是看不见，元素仍占位、可聚焦、影响 tab 键顺序，甚至被屏幕阅读器读到。
- 不要用
display: none触发过渡——它不支持动画，一加一删就是闪退 - 推荐组合：
visibility: hidden（关交互） +opacity+transform，并在动画结束时监听transitionend事件，再设visibility: hidden或移除 class - JavaScript 控制时，隐藏逻辑不能只删
active类，得等动画帧结束再清理状态，否则快速连点可能卡在中间态 - 若复用同一 DOM 节点，每次 show 前记得重置
style.transform和style.opacity，避免残留内联样式干扰 transition
性能与兼容性要注意的几个点
缩放动画看似简单，但在老版 Safari 或低端 Android 上容易掉帧、闪烁，尤其叠加 blur 或阴影时。
- 强制硬件加速：加
transform: translateZ(0)或will-change: transform（慎用，别滥用will-change） - Safari 对
scaleX/scaleY单独使用有合成层降级风险，统一用scale(1)，别拆开 - 缓动函数别用默认
ease：它前慢后快，入场像“卡顿起步”。推荐cubic-bezier(0.25, 0.46, 0.45, 0.94)（快进慢出），更符合物理直觉 - 起始
scale别设为0：内部子元素尺寸归零可能导致重排异常、点击区域失效，0.7～0.85是稳妥起点
真正难的不是让弹窗“动起来”，而是每次 show/hide 后，DOM 状态、焦点管理、事件监听器、动画属性都干净归位——漏一个，下次点开就可能失焦、卡顿或白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
