真正能稳定缩放又不卡的是 transform: scale()，因其不触发重排、gpu加速且兼容性好；width/height加transition无效主因是触发重排、起始值为auto不可插值、或基础样式未声明初始值。
transition 本身不能直接让 width 或 height 平滑变化，除非你绕开浏览器的渲染限制——否则要么不动、要么闪一下、要么卡顿。真正能稳定缩放又不卡的，是 transform: scale()。
为什么 width/height 加了 transition 没反应
常见错误现象：写了 transition: width 0.3s，hover 时却瞬间跳变，没有过渡。
-
width和height变更会触发重排（reflow），浏览器必须重新计算整个布局树，这本身就和“平滑动画”冲突 - 如果起始值是
width: auto，浏览器无法插值——它不知道“auto”对应多少像素，过渡就失效 - 父容器用了
transform或will-change却没配contain: layout paint，子元素的width过渡可能被 iOS Safari 截断 - 只写
.box:hover { width: 200px; }，但基础样式里没声明width（比如默认是auto），浏览器拿不到起始值，过渡无法启动
用 transform: scale() 实现视觉缩放过渡
这是最轻量、最可靠的方式：不改变文档流，GPU 自动加速，且兼容性好（IE9+）。
- 基础样式里必须显式声明
transform: scale(1)，否则第一次 hover 会从“无状态”跳到目标值，没过渡 - 配合
transform-origin控制缩放基点，比如transform-origin: top left让左上角固定 - 避免用
scale(0)—— 它会让子元素不可点击、文本不可选；改用scale(0.01)更安全 - 移动端要注意：部分 Android WebView 对
scale的子元素z-index处理异常，建议加backface-visibility: hidden稳定图层
button {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
button:hover {
transform: scale(1.15);
}
需要真实尺寸收缩？用 max-height + overflow 配合 transition
适用于下拉菜单、折叠面板这类“高度从 0 展开”的场景，本质是骗过浏览器：用 max-height 替代 height，因为它是可插值的。
- 初始状态设
max-height: 0，同时加overflow: hidden隐藏内容 - 展开状态设
max-height: 500px（值要大于内容实际高度，但别过大，否则动画拖沓） - 不能用
max-height: none—— “none” 不可插值，动画会失效 - 如果内容高度动态变化（比如文字行数不确定），JS 需先读取
scrollHeight再赋给max-height，否则过渡不精准
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.panel.open {
max-height: 500px;
}
JS 控制过渡时最容易忽略的同步时机
直接改 element.style.width 后立刻改回，浏览器来不及识别状态差，transition 就不会触发。
- 不要这样写：
el.style.width = '200px'; el.style.width = '300px';—— 中间没留空隙，等于白设 - 正确做法是强制一次同步布局：
el.offsetWidth;（读一个布局属性，触发重排），再改目标值 - 或者用
setTimeout(() => { /* 改样式 */ }, 0)把变更推到下一帧，但不如offsetWidth稳定 - 在 React/Vue 等框架中，状态更新后 DOM 尚未渲染，需用
nextTick或requestAnimationFrame包裹操作
transform 和 opacity 是唯二既可 GPU 加速、又无需重排的过渡属性。其他所有涉及盒模型尺寸的改动，本质上都在和浏览器渲染管线较劲——不是不能做，而是得清楚代价在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
