实现点击缩放不卡顿的关键是用transform配合transition，避免重排；需显式声明transition: transform，禁用width/height动画，移动端须用js监听touch事件而非:active。
点击后元素缩放但不卡顿，关键在 transform 和 transition 的配合
直接用 transform: scale() 配合 :active 或 JS 切换 class 是最轻量的方案，但很多人发现缩放“闪一下”或“动不了”——根本原因是没加 transition，或者把动画写在了非合成层属性（比如 width / height）上。
浏览器对 transform 和 opacity 有硬件加速支持，而 left、top、margin 等会触发重排（reflow），必然卡顿。
- 必须显式声明
transition: transform 0.2s ease，不能只靠浏览器默认行为 - 避免同时修改
scale和width—— 后者会让动画退化为软件渲染 - 如果元素有子内容（如文字、图片），缩放时可能模糊；可加
will-change: transform提前提示合成层，但别滥用（会增加内存开销）
用 :active 实现纯 CSS 点击缩放，但要注意移动端失效问题
:active 在桌面端点按即生效，但在多数移动端浏览器里，点击后焦点移走太快，:active 状态几乎无法捕捉。所以它只适合“悬停+点击”双模式兼容场景，或明确只跑桌面端。
示例（按钮点击压下效果）：
.btn {
transform: scale(1);
transition: transform 0.15s ease;
}
.btn:active {
transform: scale(0.95);
}
- 移动端要可靠响应，必须用 JavaScript 监听
touchstart+touchend，或统一用click（iOS Safari 有 300ms 延迟，但现代框架常已禁用） -
:active不支持自定义持续时间，松手即恢复，不适合“点击后保持缩放态”的交互 - 若需长按缩放，
:active也不够用，得结合setTimeout检测按压时长
JS 控制 scale 缩放态，推荐 toggleClass 而非内联 style
用 JS 直接改 element.style.transform = 'scale(1.2)' 看似简单，但会导致样式难以复用、无法用 CSS 过渡控制缓动函数、且和伪类冲突。更健壮的做法是切换 class。
示例（点击切换缩放状态）：
.card { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.card.is-zoomed { transform: scale(1.15); }
document.querySelector('.card').addEventListener('click', el => el.classList.toggle('is-zoomed'));
- 缓动函数用
cubic-bezier(0.34, 1.56, 0.64, 1)比ease更有弹性感，避免机械感 - 注意：缩放中心默认是元素中心（
transform-origin: center），如果想从左上角缩放，得加transform-origin: top left - 多次快速点击可能让 class 切换不同步，可用
el.classList.contains('is-zoomed')显式判断状态，而非无脑toggle
缩放后布局塌陷？记得用 transform 不影响文档流
transform: scale() 是视觉变换，不会改变元素实际占用的空间大小。所以如果你发现缩放后周围元素“不动”、或者文字溢出、边距错乱，大概率是因为你误用了 width/height 动画，或者忘了父容器 overflow: hidden。
- 缩放后的子元素若超出父容器，需要父级设
overflow: hidden才能裁剪 - 如果希望缩放时带动周边布局（比如卡片放大后顶开下面的内容），那
transform就不是正确选择，得用scale()配合max-width+height: auto等真实尺寸变化，但性能代价大 - 绝对定位元素缩放时，
transform-origin默认仍是自身左上角，容易偏移，务必检查是否需要手动设为center
scale(1.2) 就完事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
