用transition实现头像“放大→全屏”需结合transform动态计算与css过渡：1.包裹容器并设全屏遮罩层；2.用scale()和translate(-50%,-50%)以中心锚点缩放；3.js获取头像位置并动态设置初始transform；4.添加touch-action:none等移动端适配。
在 H5 页面中，用 transition 实现头像点击后「放大→全屏」的过渡效果，核心在于：**用 CSS 过渡控制 transform 和 opacity 的变化，配合 JS 切换状态类，同时注意层级、尺寸计算和移动端适配**。纯 transition 无法完成“从原位置放大到全屏”的动画（因为起点终点尺寸/位置差异大），需结合 transform: scale() 与 transform: translate() 动态计算，再用 transition 平滑过渡。
1. 基础结构：头像容器 + 全屏遮罩层
不直接对 img 标签做全屏 transition，而是包裹一层可定位容器，并准备一个隐藏的全屏预览层：
- 头像用
<div class="avatar"><img src="..."></div>包裹，方便绝对定位和缩放 - 全屏预览层（
.avatar-modal）初始display: none或visibility: hidden，但必须存在于 DOM 中，且position: fixed; top: 0; left: 0; width: 100%; height: 100% - 给 modal 内的图片设置
max-width: 100%; max-height: 100%; object-fit: contain;防止拉伸
2. 关键 CSS：用 transform + transition 模拟“飞入”效果
不能只靠 width/height 过渡（会触发重排，卡顿），必须用 transform（GPU 加速）：
- 默认状态下，modal 设置
opacity: 0; transform: scale(0.8) translate(-50%, -50%);，并加transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - 激活态（如加类
.active）时，modal 改为opacity: 1; transform: scale(1) translate(-50%, -50%); - 重点：translate(-50%, -50%) 是为了让元素以中心为锚点缩放，否则默认按左上角缩放，视觉跳动明显
3. JS 触发：动态计算起始位置，提升真实感
如果想让图片“从原头像位置平滑飞入全屏”，需要 JS 获取头像在视口中的位置，并设为 modal 初始 transform：
- 点击头像时，用
getBoundingClientRect()获取其left、top、width、height - 将 modal 的
style.transform设为translate(${x}px, ${y}px) scale(${scale})，其中scale = Math.min(window.innerWidth / rect.width, window.innerHeight / rect.height) * 0.95（留点边距） - 再立即添加
.active类，transition 就会从该起点过渡到全屏居中状态 - 关闭时反向操作：先移除 active 类 → 过渡回缩放+位移 → 等 transition 结束后再
display: none
4. 移动端友好细节
H5 在手机上容易因缩放、双击、滚动干扰体验，需加固：
- 给
.avatar-modal加touch-action: none;防止拖拽误触发页面滚动 - 禁用图片长按保存：
<img ... style="max-width:90%"> - 全屏时加
body { overflow: hidden; }，避免滚动条闪动 - transition 时间建议 0.25s–0.35s，太慢显迟滞，太快失真；贝塞尔曲线推荐
cubic-bezier(0.34, 1.56, 0.64, 1)（略微过冲，更自然）
