移动端缩略图点击切换大图实现丝滑过渡的核心是结构复用、坐标锚定与css动画驱动：通过getboundingclientrect获取缩略图位置，用fixed定位大图容器并初始覆盖该区域，配合transform和opacity的cubic-bezier过渡；同时预加载2x高清图确保清晰度；滑动切换采用scrollleft+scroll-snap实现连续性；退出时镜像还原至原始缩略图位置。
移动端缩略图点击切换大图要实现丝滑过渡，核心不是“换图快”，而是视觉连贯、动效自然、交互响应及时。关键在三个层面协同：结构复用、坐标锚定、CSS动画驱动，而非单纯靠 JS 切图或硬跳转。
复用缩略图位置作为大图入场起点
点击缩略图时，不要新建一个居中弹窗再加载大图——那样必然有位移感和空白闪动。正确做法是：用 getBoundingClientRect() 精确捕获缩略图在视口中的位置（left、top、width、height），然后将全屏大图容器初始状态设为完全覆盖该区域，并设置 transform: scale(1) + opacity: 0，再通过 CSS transition 同步过渡到全屏居中+放大+不透明。
- 缩略图容器需有明确 position（如 relative），避免 getBoundingClientRect 偏移
- 大图容器用 fixed 定位，初始 left/top/width/height 严格匹配缩略图矩形
- 过渡属性写全：transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s
大图入场后立即启用物理像素级渲染
缩略图通常加载的是 1x 或 400w 尺寸图，直接拉伸会模糊。丝滑的前提是清晰——所以大图必须从点击那一刻起就加载 2x 或 srcset 中的高分源。不能等动画结束才换图。
- 缩略图的 data-srcset 属性应预存大图的高清地址（如 "large.jpg 2x, large@3x.jpg 3x"）
- 点击瞬间用 new Image().src = highResUrl 预加载，同时把 img.src 设为该地址
- 可加 loading="lazy" 但需在点击前 remove，确保即时触发加载
手势滑动切换时保持视觉连续性
左右滑动切换大图时，若用 transform 移动整页容器，会导致滚动状态丢失、无法监听对齐、getBoundingClientRect 失准。必须用原生 scrollLeft + scrollTo，再叠加 translateZ(0) 强制 GPU 加速。
- 大图容器设 overflow-x: auto; scroll-snap-type: x mandatory; 和每张图设 scroll-snap-align: start;
- 禁用 scroll-behavior: smooth，改用 element.scrollTo({ left: pos, behavior: 'smooth' }) 控制单次滚动
- 滑动过程中监听 scrollLeft 变化，动态调整当前图的 transform: scale() 实现“越界挤压”效果，增强拖拽反馈
退出时反向锚定回缩略图位置
关闭大图不能简单 fade-out，而要执行“镜像入场”：从全屏尺寸平滑缩回到缩略图原始矩形，同时 opacity 归零。这需要保存点击时的原始 rect，并在关闭动画中反向映射。
- 关闭前记录当前大图容器的 getBoundingClientRect()，与原始缩略图 rect 比较，算出缩放比和位移偏移
- 用 transform: translate(x, y) scale(s) 一次性还原，避免分步操作造成卡顿
- 动画结束后再移除 DOM，防止销毁瞬间闪白
