HTML原生不支持共享元素过渡，必须依赖JavaScript计算坐标尺寸并操作DOM，CSS仅负责动画执行。其本质是克隆源元素，用transform实现位置尺寸平滑变化，再清理节点切换视图。
HTML 原生不支持共享元素过渡（Shared Element Transition）——这不是 CSS transition 或 @keyframes 能直接实现的功能，必须依赖 JavaScript 配合精确的坐标、尺寸计算和 DOM 操作，或使用特定框架/平台（如鸿蒙、Android、Web Components 库）提供的封装能力。
为什么纯 HTML+CSS 无法直接做共享元素过渡
共享元素过渡的本质是：在两个页面/视图间，让同一个语义元素（比如一张图片、一个标题）从 A 位置 + A 尺寸 + A 状态，平滑地“变形”到 B 位置 + B 尺寸 + B 状态。这需要：
- 同时获取源元素和目标元素的
getBoundingClientRect()（含 scroll 偏移） - 在切换瞬间克隆源元素并绝对定位到当前视图层，避免布局抖动
- 用
transform: translate() + scale()驱动动画，而非修改top/left/width/height - 动画结束后清理克隆节点，并激活目标视图
这些步骤无法靠声明式 CSS 自动完成。所谓“HTML 实现”，实际是 HTML 提供结构（id 或 data-shared-id），JS 承担协调，CSS 只负责动画执行层。
用 JavaScript 手动实现最小可行共享过渡
适用于单页应用（SPA）中两个 <section> 之间的图片共享过渡。核心逻辑是“克隆 → 定位 → 动画 → 替换”：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给源图加
data-shared-id="hero-img"，目标图也加相同id或data-shared-id - 点击时，用
document.elementFromPoint()或直接querySelector获取源元素位置 -
cloneNode(true)克隆源图，设为position: fixed，z-index 置顶，初始transform匹配源位置尺寸 - 立即读取目标图的
getBoundingClientRect()，计算 translate/scale 差值 - 对克隆节点设置
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)，再写入目标transform - 监听
transitionend，移除克隆节点，显示目标视图，隐藏源视图
注意：若目标图尚未渲染（如懒加载），需先 offsetHeight 强制触发 layout，再取尺寸。
常见踩坑点：transition 不生效 or 卡顿
即使代码逻辑正确，共享过渡仍可能失败，原因集中在以下几点：
-
transform和opacity外的属性（如width、height、top）参与过渡 → 触发重排（reflow），帧率暴跌；必须只用transform+opacity - 源/目标元素未设置
will-change: transform→ GPU 合成层未提前创建，首帧卡顿 - 克隆节点未移除
pointer-events: none→ 动画中误触底层按钮 - 目标图用了
background-image而非<img>→ 无法准确测量内容尺寸，scale 计算失真 - 父容器有
overflow: hidden且克隆节点超出边界 → 动画中途被裁剪，视觉突兀
更稳妥的选择：用现成库或平台 API
手写易出错，生产环境建议优先考虑封装方案：
- React 用户可用 react-flip-toolkit，基于 FLIP 原则自动处理坐标映射
- Vue 用户可试 vue-moveable 或组合
TransitionGroup+getBoundingClientRect - 鸿蒙/Android 原生开发直接用
sharedTransition(id, options)，系统级优化，无需手动测尺寸 - Web Components 方案如 shared-element-transitions 提供自定义元素封装
真正难的不是写动画，而是精准同步两个时刻的几何状态——任何一帧的位置偏差，用户都会觉得“没对上”。所以别省略 getBoundingClientRect() 后的 scroll offset 补偿，也别跳过 requestAnimationFrame 对齐时机。
