必须显式设置初始transform: scale(1)并把transition写在基础状态，否则浏览器无法过渡；纯CSS无法监听点击，需JS切换类控制全屏遮罩层的visibility和scale动画。
点击图片触发 scale 放大时为什么没过渡效果
直接给 img 加 transform: scale(2) 和 transition: transform 0.3s 是无效的——因为默认状态下图片没有设置 transform，浏览器无法从“无”过渡到“有”。必须显式声明初始 transform: scale(1)，让过渡有起点。
- 务必在未点击的图片上写死
transform: scale(1)（哪怕它看起来多余） -
transition要加在基础状态（非:hover或.active）上，否则只在鼠标移出时过渡 - 移动端需用
touchstart或click触发类切换，不能依赖:hover
如何用纯 CSS + 少量 JS 实现点击放大+背景遮罩
纯 CSS 无法监听点击并切换状态，必须配合 JS 切换 class。核心是：用一个全屏 div.overlay 包裹放大的图片，并控制其 visibility 和 transform。
- HTML 结构里，每个
img外层加一层div.img-wrapper，用于定位和事件绑定 - JS 只做一件事：点击时给
body加preview-active类，并把当前src写入.overlay img - CSS 中，
.overlay默认opacity: 0; visibility: hidden;，激活后设为opacity: 1; visibility: visible;，同时对内部img做transform: scale(1) → scale(1.5) - 记得加
will-change: transform防止 iOS Safari 渲染卡顿
scale 放大后图片模糊、边缘锯齿怎么解决
这是 WebKit 内核（尤其是 iOS Safari）对 transform: scale() 的光栅化策略导致的，默认用低精度采样。不靠 JS 拉伸 canvas，仅 CSS 可缓解：
- 给放大的图片加
image-rendering: -webkit-optimize-contrast;（iOS 有效） - 强制开启硬件加速：
transform: scale(1.5) translateZ(0); - 避免小图强行放大 3 倍以上；建议预加载原图尺寸，或服务端返回适配 viewport 的高清图
- 如果用
background-image替代background-size: contain+transform，模糊略轻
点击放大后如何支持双指缩放和拖拽
CSS scale 是单次变换，不支持交互式缩放。真要双指缩放，必须放弃纯 CSS 方案，改用 gesturestart/gesturechange 监听或第三方库如 panzoom。
- 若只需基础放大，用
scale+transition最轻量 - 若要手势支持，别硬套 CSS transform，直接用
img的width/height+top/left动态计算，配合touchmove事件 - 注意：iOS Safari 对
touch-action: none的处理很敏感，禁用默认缩放前先加
实际项目中，最常被忽略的是 transform 初始值缺失和 transition 位置错配——这两个点一错，整个过渡就静默失效，连 console 都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
