必须在常态样式中声明transition: transform 0.2s ease，否则悬停无动画；需配合will-change: transform解决缩放模糊；移动端应使用:active或js切换类名实现点击反馈；注意display和transform-origin设置以防布局错乱。
必须在常态样式里写 transition: transform 0.2s ease;，否则悬停时只会跳变，没有动画。
transition 必须写在常态样式里，不是 :hover 里
浏览器对 transform 变化默认不加缓动，transition 是“开启动画开关”的指令，它得提前声明——就像告诉浏览器：“接下来我要动 transform，请按这个节奏过渡”。
- ✅ 正确：在
.btn { transition: transform 0.2s ease; }中定义 - ❌ 错误：只写在
.btn:hover { transition: transform 0.2s ease; }—— 这行根本不会生效，因为 hover 状态开始时，transition 还没被注册 - ⚠️ 别偷懒写
transition: all 0.2s ease;：万一后续加了color或border变化，它们也会被拖慢，干扰点击反馈的即时感
scale 放大后模糊或抖动？加 will-change: transform;
Chrome/Safari 在非整数像素缩放时容易渲染出亚像素模糊，尤其放大 1.15 倍这种值。这不是 bug，是光栅化限制。
- ✅ 在常态样式加
will-change: transform;，让浏览器提前把该元素提升到独立合成层，启用 GPU 加速 - ⚠️ 但别滥用：每个按钮都加会增加内存开销，只对高频交互或明显模糊的元素加
- ? 如果文字仍发虚，macOS 下可试
-webkit-font-smoothing: subpixel-antialiased;，但仅限局部调试，不建议全局启用
移动端点不放大？别依赖 :hover
iOS Safari 和多数安卓浏览器没有持续 hover 状态，手指点下去就触发一次 :hover，抬手就结束，无法维持放大态。
- ✅ 改用
:active模拟按下反馈：.btn:active { transform: scale(0.95); }，再配transition就有按压感 - ✅ 真需要“点一下放大、再点恢复”，就得用 JS 切换类名：
element.classList.toggle('is-expanded'); - ⚠️ 别给按钮加
cursor: pointer;试图“修复”移动端 hover——它对触摸设备无效，纯属心理安慰
放大后布局错乱？检查 display 和 transform-origin
transform: scale() 本身不占位，但会影响行高、父容器溢出、flex 子项尺寸计算等隐性行为。
- ✅ 给按钮设
display: inline-flex;或display: block;，避免 inline 元素缩放后撑高整行 - ✅ 显式写
transform-origin: center;（默认就是 center，但写出来更可控），防止缩放中心偏移导致视觉晃动 - ⚠️ 如果按钮在 flex 容器中且用了
flex-grow，缩放后可能触发重新计算——这时应改用固定宽高 +transform，别混用流式布局和视觉变形
真正卡住人的从来不是写不出 scale(1.2)，而是缩放后阴影要不要同步变大、父容器有没有留够 10% 余量、用户划过时要不要加 transition-delay: 50ms 来过滤误触——这些细节不测到真机，上线前根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
