← Dialog / Popover · 浮层与「关闭」的现代解法 / 实战：平滑的图片预览 待审核 8 / 9
recipe · 图片预览实战

实战：平滑的图片预览

把本系列各页的能力（dialog 基础、closedby 等）组合成一个完整功能：点缩略图放大预览。要做好，需要同时解决几件事——放大层要稳定盖在一切之上(top layer)、要能 Esc / 点外部关闭、要对读屏友好（焦点管理）、还需要缩略图「放大」成大图的连贯过渡。答案不是某个图片库，而是几个原生能力的组合：

  • 承载层 = <dialog>：直接获得 top layer、::backdrop、Esc、焦点陷阱、无障碍。
  • 过渡 = View Transitions：给缩略图和大图标同一个 view-transition-name，浏览器自动补间位移与缩放。
  • 关闭 = closedby="any"：点遮罩即关，无需手写监听（见「closedby」那页）。
  • 不白屏 = hover 预加载：鼠标移到缩略图时就开始拉大图。

1 · 核心代码

为什么过渡能「认得」是同一张图？因为旧快照里缩略图、新快照里大图共用同一个 view-transition-name。浏览器据此把它俩当作「同一个东西的两个状态」，自动算出位移/缩放补间。关键是任一时刻同名只能有一个元素——所以打开时要把缩略图的名字清掉、交给大图，关闭时再换回来。

降级与注意点：::backdrop 上无法直接挂事件，所以「点遮罩关闭」交给 closedby="any" 而非自己监听；startViewTransition 不支持时直接开关（无过渡，功能不缺）；缩略图和大图分离时记得用 srcset 或预加载，否则点开会等大图下载。想让浏览器/安卓返回键也能关预览，可再叠 CloseWatcher（见「CloseWatcher」那页）或 History API。

延伸阅读：图片预览最佳实践 · 张鑫旭——用 <dialog> + View Transitions + 历史记录做产品级图片放大预览的完整思路与注意事项。