HTML怎么做共享元素过渡_HTML共享元素过渡动画实现【手册】-html教程-PHP中文网

html原生不支持共享元素过渡，必须依赖javascript计算坐标尺寸并操作dom，css仅负责动画执行。其本质是克隆源元素，用transform实现位置尺寸平滑变化，再清理节点切换视图。

html怎么做共享元素过渡_html共享元素过渡动画实现【手册】

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></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 且克隆节点超出边界 → 动画中途被裁剪，视觉突兀