做了这么多年前端全屏缩放这类交互我接过不少次。很多人一开始都觉得不就是点击卡片加个transition让它放大到铺满屏幕嘛能有多难真上手才发现动画要么是从角落斜着飞出去要么干脆闪现到全屏、中间的过渡过程完全消失。这篇文章就以图片卡片全屏预览为例把背后的坐标换算、动画原理、完整代码和几个我踩过的坑一次讲清楚。适合正在做相册预览、商品详情、富文本配图这类交互的开发者参考。先给结论全屏缩放的核心不是“transition 加没加对”而是你怎么把一个元素在屏幕上的旧位置用 transform 映射到全屏的新位置。这套映射关系搞懂了任何元素——图片、卡片、弹窗——都能做出顺滑的缩放过渡。1. 全屏缩放动画为什么总做歪先搞清 transform 坐标系1.1 一个“直接放大十倍”的失败案例最早我见过一个项目同事给全屏状态写了这么一段 CSS.card { transition: transform 0.4s ease; } .card.fullscreen { position: fixed; inset: 0; transform: scale(10); }他当时的思路是先把元素position: fixed铺满屏幕再用scale(10)从正常尺寸放大。结果动画一跑元素不是从卡片中心放大的而是从屏幕某个角落斜着“飞”到中间的完全不是预期效果。为什么因为scale(10)是以元素自身的中心默认 transform-origin: 50% 50%为原点放大的。一张 200×300 的卡片在屏幕左上角它的中心大概在 (100, 150)放大十倍后中心点还是 (100, 150)但矩形宽度变成 2000左边和上边会往负方向延伸出去一大截。也就是说当它放大到全屏尺寸时位置早就偏出了视口视觉上自然就是“歪着飞”。这类问题的根源是大多数人对transform的理解停留在“缩放就是变大变小”忽略了缩放中心这个变量。而全屏缩放动画恰恰要精确控制缩放中心才能保证元素从原位置“原地涨开”到全屏。1.2 缩放中心与视觉锚点的错位transform-origin决定了缩放的原点。默认情况下它是50% 50%也就是元素盒子的正中心。当你只写scale(2)时元素围绕自己的中心放大——左上角随之向右下方移动移动距离等于原宽度的一半。这种“以中心为锚点”的缩放在普通 hover 效果里没问题但用在“全屏铺满”这种需要精准落位的场景里麻烦就来了因为全屏后的元素视觉锚点应该是视口的左上角而缩放过程中的锚点却是元素本身的中心。这两个锚点对不上于是无论你 scale 参数怎么调动画总是差那么一截手动试出来的数字又只对当前这一个元素有效换一个卡片就全乱。日常凡是涉及“从 A 位置精确过渡到 B 位置”的动画都不要依赖默认中心缩放直接把transform-origin设为0 0把缩放锚点固定到左上角。这是 FLIP 方案里最省心的起点。如果还是觉得抽象可以想象放大镜你拿着放大镜看地图想让地图上某个点放大后还停在原来的屏幕位置就得同时移动放大镜的位置。transform里的translate就是那只移动放大镜的手scale就是放大倍数两者必须配合缺一个都会跑偏。2. 一套通用的数学映射从原位置到全屏位置的位移与缩放计算2.1 用 getBoundingClientRect 采集前后两个状态业界有个很成熟的做法叫 FLIP就是 First、Last、Invert、Play 四个单词的首字母先记录元素动画前的位置First再让元素变成目标状态、记录目标位置Last然后通过transform把元素从 Last 状态“伪装”回 First 状态Invert最后播放过渡让它从 First 平滑移动到 Last。这里的关键是那两个位置记录。浏览器提供了现成的方法const rect element.getBoundingClientRect();getBoundingClientRect()返回的是元素相对于视口的坐标包含left、top、width、height。视口坐标恰好对应position: fixed的坐标体系所以无论是记录原始位置还是计算全屏位置都用它准没错。实际操作里First 是点击瞬间记录的元素原始矩形Last 则是把元素设为position: fixed; inset: 0之后再取一次矩形。正常情况下 Last 就是left: 0, top: 0, width: 视口宽, height: 视口高。如果你的项目里元素用了box-sizing: border-box读取到的尺寸也包含边框正好和视觉一致。2.2 以左上角为原点的 FLIP 计算公式拿到 First 和 Last 两个矩形后Invert 参数的计算就非常机械了。先把transform-origin固定为0 0const dx first.left - last.left; const dy first.top - last.top; const sx first.width / last.width; const sy first.height / last.height; element.style.transform translate(${dx}px, ${dy}px) scale(${sx}, ${sy});为什么这是对的拆开来看。应用这组 transform 之前元素已经处于 Last 状态也就是铺满整个视口、左上角在 (0, 0)。然后scale(sx, sy)以左上角为原点把元素尺寸缩放到 First 状态的大小translate(dx, dy)再把左上角从 (0, 0) 移动到 First 状态的left/top。两步叠加元素就从“全屏状态”变回了“原始状态”的视觉呈现。此时页面看起来什么也没发生只是卡片还在原来的位置但 DOM 里它其实已经是全屏定位了。举个例子。假设一张卡片原始矩形是left: 120, top: 180, width: 240, height: 160视口是 1920×1080const dx 120 - 0; // 120 const dy 180 - 0; // 180 const sx 240 / 1920; // 0.125 const sy 160 / 1080; // 约 0.148 element.style.transform translate(120px, 180px) scale(0.125, 0.148);你可能会困惑全屏动画一般不都是放大吗为什么 scale 小于 1因为这里 apply 的是 Invert我们是把一个已经全屏的元素先缩小回原位然后才通过播放过渡让它“展开”到全屏。数学上先缩小再放大视觉上就成了平滑的放大动画。第一次接触 FLIP 的人都会在这绕一下想明白就通了。注意 transform 顺序不能反过来。CSS 里translate(...) scale(...)表示先 scale 后 translate如果写成scale(...) translate(...)translate 的值会被 scale 因子再缩放一遍位置就错了。2.3 为什么必须用 transform 而不是直接改宽高和坐标有些朋友可能想过另一种实现给元素设置transition: all然后直接改left/top/width/height从卡片尺寸过渡到全屏尺寸。这个方法能跑但性能和效果都不好。原因在于left/top/width/height都是布局属性。每次改动浏览器都要重新计算布局layout再做绘制paint最后才到合成composite。元素全屏放大过程中整个文档流都会被影响尤其当页面里有很多图片、文字时每一帧重排都会带来明显的卡顿。而transform走的是合成器线程元素只是被 GPU 平移/缩放不影响文档流中的兄弟元素也不需要重新布局。这也是浏览器里少数的“合成属性”之一另一个常用的是opacity在这两者上做动画帧率最容易做到稳定流畅。所以全屏缩放这套方案的黄金准则就是结构状态用 class 切换视觉位置交给 transform动画过程绝不碰布局属性。3. 完整可复制代码图片卡片全屏预览的过渡动画3.1 HTML/CSS/JS 组合实现下面这份代码可以直接拷贝到一个空 HTML 文件里跑起来。我用 CSS 渐变代替真实图片方便你本地测试换真实图片时把img标签放进去即可。div classgrid idgrid div classmedia-card div classthumb stylebackground-image: linear-gradient(135deg, #667eea, #764ba2)/div /div div classmedia-card div classthumb stylebackground-image: linear-gradient(135deg, #f093fb, #f5576c)/div /div div classmedia-card div classthumb stylebackground-image: linear-gradient(135deg, #4facfe, #00f2fe)/div /div /div div classoverlay idoverlay/divbody { margin: 0; padding: 40px; background: #f5f5f5; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } .media-card { border-radius: 12px; overflow: hidden; cursor: zoom-in; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .thumb { aspect-ratio: 4 / 3; } .media-card.fullscreen { position: fixed; inset: 0; z-index: 10; width: 100vw; height: 100vh; border-radius: 0; cursor: zoom-out; box-shadow: none; } .media-card.fullscreen .thumb { width: 100%; height: 100%; } .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .overlay.show { opacity: 1; pointer-events: auto; }JS 是核心const grid document.getElementById(grid); const overlay document.getElementById(overlay); let activeCard null; let firstRect null; let reverseTransform ; let closing false; grid.addEventListener(click, (e) { const card e.target.closest(.media-card); if (!card) return; if (closing) return; if (card activeCard) { closeCard(card); return; } openCard(card); }); function openCard(card) { activeCard card; firstRect card.getBoundingClientRect(); card.classList.add(fullscreen); const lastRect card.getBoundingClientRect(); const dx firstRect.left - lastRect.left; const dy firstRect.top - lastRect.top; const sx firstRect.width / lastRect.width; const sy firstRect.height / lastRect.height; reverseTransform translate(${dx}px, ${dy}px) scale(${sx}, ${sy}); card.style.transformOrigin 0 0; card.style.transition none; card.style.transform reverseTransform; void card.offsetWidth; card.style.transition transform 0.45s cubic-bezier(0.22, 0.8, 0.36, 1), border-radius 0.45s ease; card.style.transform none; overlay.classList.add(show); document.body.style.overflow hidden; } function closeCard(card) { closing true; card.style.transition transform 0.45s cubic-bezier(0.22, 0.8, 0.36, 1), border-radius 0.45s ease; card.style.transform reverseTransform; overlay.classList.remove(show); document.body.style.overflow ; setTimeout(() { card.classList.remove(fullscreen); card.style.transition ; card.style.transform ; card.style.transformOrigin ; activeCard null; firstRect null; closing false; }, 460); } document.addEventListener(keydown, (e) { if (e.key Escape activeCard) { closeCard(activeCard); } });这份代码的思路是用事件委托监听网格里的卡片点击打开全屏时保存第一个矩形应用反向 transform然后播放过渡关闭时反向播放等动画结束再清理样式。定时器比transitionend稳定因为如果某个浏览器丢了事件就永远清理不掉了。3.2 打开与关闭的双向动画处理打开和关闭看起来像两套逻辑但其实共用同一个reverseTransform。打开时卡片先被设成全屏定位再被 Invert 回原位然后播放到“无 transform”。关闭时卡片保持全屏定位直接把transform设回reverseTransform它就会从全屏状态缩回原位。动画结束后移除fullscreen类卡片回到文档流里的原始位置视觉上不会有任何跳动。一个容易踩的坑是关闭时如果在动画结束前移除fullscreen类元素会瞬间从 fixed 全屏状态弹回文档流动画直接中断成闪现。所以清理动作一定要放在动画完成之后而且要同时清掉内联的transform和transition不然下一次打开时残留的 transition 会把 Invert 也变成过渡导致奇怪的双重动画。3.3 清理状态、滚动锁定和重复点击保护全屏交互有三个容易被忽略的状态管理问题滚动、重复点击、Escape/遮罩关闭。打开全屏时我建议同步锁定document.body.style.overflow hidden否则内容较长时鼠标滚轮还能滚动到底部背后页面跟着晃。关闭时再恢复为。重复点击保护则用closing标志关闭动画进行中不允许再次打开或触发第二次关闭。否则firstRect会被覆盖反向 transform 变成另一套值动画必然错位。你也可以把closing换成“保存当前动画状态”对象更精细地做法是记录一个animationToken每次 setState 前检查 token 是否一致防止异步乱序但小型交互里一个布尔变量足够。实际项目中如果动画开始了又立刻被要求反向最好等当前动画结束再响应下一次操作。强行打断会让 transform 和缓存矩形失配调试起来会非常折磨。4. 现代的新路子View Transitions API 与原生全屏缩放4.1 document.startViewTransition() 的用法如果你不追求兼容到很老的浏览器而且希望代码更精简可以试试 View Transitions API。它的核心思路是你同步修改 DOM浏览器自动记录旧状态快照和新状态快照然后为它们生成过渡动画。对于全屏缩放这种“同一个元素换了尺寸位置”的场景只需要给元素设置同一个view-transition-name浏览器就会自动把它从旧位置“推”到新位置。function openWithViewTransition(card) { if (!document.startViewTransition) { openCard(card); // 降级到手动 FLIP return; } const transition document.startViewTransition(() { card.classList.add(fullscreen); overlay.classList.add(show); document.body.style.overflow hidden; }); }配合 CSS.media-card.fullscreen { view-transition-name: card-zoom; } ::view-transition-group(card-zoom) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.36, 1); }写法上有一个硬性要求view-transition-name在同一个时刻必须是唯一的。如果页面里有多张卡片每张都叫card-zoom浏览器会直接忽略或者动画错乱。所以现实项目里通常给每张图片卡片分配一个独立名字比如card-1、card-2全屏时保持同一个名字不变cards.forEach((card, i) { card.style.viewTransitionName card-${i}; });关闭时调用另一个startViewTransition把fullscreen类和 overlay 状态移除浏览器同样会自动处理回缩动画。4.2 手写 FLIP 与 View Transitions 的选择有人可能会问既然有了原生方案手写 FLIP 是不是多余了我用一个对比表说明各自的适用场景对比维度手写 FLIPView Transitions API兼容性几乎所有现代浏览器Chromium 内核支持较新版 Safari 也跟进Firefox 需观望实现成本需要自己管理快照、反向 transform、清理少写很多代码回调里直接改 DOM 状态可控性每一帧、每个曲线都完全掌控通过 CSS 动画调整但快照机制细节有限制性能取决于开发者是否只动 transform/opacity浏览器原生合成快照通常更稳额外效果需要自己给背景、文字写淡出可以整页过渡影子、边框、背景都自动覆盖我的判断标准是历史老项目、动画有特殊要求、或者要兼容比较旧的浏览器时手写 FLIP 更可靠内容型网站、卡片交互不是特别复杂、希望快速上效果时View Transitions 引入的代码量很少性价比更高。4.3 兼容性与降级策略View Transitions API 最大的不确定因素就是兼容性。代码里我习惯做一次能力检测有就用没有就退回手写 FLIPif (document.startViewTransition) { // 原生过渡 } else { // 手动 FLIP 或者干脆直接切换 class }降级时即使不做动画也要保证交互是完整的卡片能打开、能关闭、滚动锁定要生效。毕竟动画是锦上添花功能可用才是底线。另外要提醒一句这里讲的“全屏”是页面内的视觉全屏不是浏览器原生的 Fullscreen API。不要把元素requestFullscreen()出来那个会把整个页面变成浏览器全屏模式和我们要的“元素放大铺满视口”是两件事经常有人混到一起。5. 实战中我踩过的几个坑从图片拉伸到动画闪跳5.1 宽高比不一致导致图片变形卡片是 4:3屏幕是 16:9直接缩放整个卡片动画过程里图片不可避免地会被拉伸。尤其当缩放比例很大时中间帧的图片会糊成一片。这个问题没有绝对完美的解法三种策略按场景选第一种是接受短暂变形。动画只有 400 多毫秒人眼注意力集中在轮廓运动而不是细节很多成熟产品都是这样做的体验并不差。第二种是适配背景图。把图片做成background-image容器用background-size: cover。缩放过程中背景图也会被拉伸但因为是一整块背景变形会比内联img温和一些。第三种是双图切换动画开始时用原图缩略图等动画进入尾声、视觉焦点开始注意到内容细节时再把全屏层里的图片替换成高分辨率版本。全屏层内部的图片替换可以用opacity交叉淡化掩盖视觉上几乎察觉不到。实现成本略高一点但适合高清图库类产品。5.2 动画“闪一下”就结束强制 reflow 与双重 rAF这个坑我印象很深。很早之前写 FLIP 动画代码长这样element.style.transform reverseTransform; element.style.transition transform 0.45s ease; element.style.transform none;打开浏览器动画完全不见卡片像闪现一样直接全屏。原因是浏览器很聪明地做了样式合并同一个 JavaScript 执行栈里连续改了三次样式浏览器只会在渲染时应用最后的值等于你根本没给过渡留出“从 A 到 B”的起点。修复方法是在设置起点状态之后、设置终点状态之前强制浏览器同步布局一次。最便宜的一招就是读取offsetWidth或者再调一次getBoundingClientRect()element.style.transform reverseTransform; element.style.transition none; void element.offsetWidth; // 强制 reflow让起点样式生效 element.style.transition transform 0.45s ease; element.style.transform none;只调一次也可以因为在设置reverseTransform之前你已经把fullscreen类加上并读取过getBoundingClientRect()那次读取本身就会触发样式计算。不过为了代码可读性和防御性我习惯显式写一行void element.offsetWidth一目了然。如果用了requestAnimationFrame方案也要注意嵌套两帧第一帧设置起点状态第二帧再设置终点状态。否则有时候浏览器仍然会把两帧合并到同一渲染批次里。相比而言强制 reflow 更直接也更省心。5.3 祖先 transform 让 fixed 定位失效迁移 DOM 占位符这是全屏缩放中最隐蔽的一个问题。position: fixed一般来说是相对视口定位的但有一个例外如果元素的任意祖先带有transform、filter或perspective这个元素会改为相对那个祖先定位相当于退化成absolute。也就是说只要你的卡片嵌套在一个开了transform动画的容器里你给它设全屏position: fixed; inset: 0它并不会铺满视口而是铺满那个容器的范围。动画自然是错的。解决思路有两种。一种是保证目标卡片所在的祖先链上没有任何 transform 相关属性但这在真实项目里很难保证。另一种更稳的做法动画前把卡片临时迁移到body下同时在原位置插入一个占位符防止文档流塌陷。function moveToBody(card, firstRect) { const placeholder document.createElement(div); placeholder.style.width firstRect.width px; placeholder.style.height firstRect.height px; card.parentNode.insertBefore(placeholder, card); document.body.appendChild(card); return placeholder; }关闭动画结束并清理完样式后再把卡片迁回原位置同时移除占位符。要注意迁移到 body 之后卡片原来的 CSS 上下文比如父容器宽度、.grid的布局可能会变化所以全屏样式里一定要显式给定width: 100vw; height: 100vh不要依赖父级。5.4 动画结束后的合成层清理与 will-change 节制动画过程中浏览器为了在合成器线程上跑 transform会把元素提升为单独的合成层。这个过程本身有一定内存开销。很多教程喜欢给动画元素加will-change: transform来“优化”但如果你给一屏里几十张卡片都加上浏览器就要为每张卡片都分配合成层内存和渲染开销直接爆炸。我的做法是除非动画过程中真的出现掉帧卡顿否则不加will-change。加了之后也要在动画结束后移除。以及关闭动画结束后要记得清掉内联transform和transition否则元素会一直保持合成层状态白白占用 GPU 内存。还有个小细节全屏动画覆盖范围很大如果背景里恰好有大量图片或者大尺寸阴影动画过程中可以先把遮罩层的opacity拉高一点让背景不那么抢眼opacity也是合成属性过渡不会卡。最后再把这招扩展到更复杂的场景如果你想让两个不同元素之间做“共享元素过渡”比如列表页点一张卡片跳到详情页里的同题材图上这套数学依然适用——把 Last 状态的目标矩形换成另一个元素的位置和尺寸就行区别只是 dx/dy/sx/sy 换成那组数值。核心思路完全一样。我在实际项目里用下来最深的体会是全屏缩放过渡这个交互难点从来不是动画怎么写而是状态怎么收干净——什么时候锁滚动、什么时候清理 transform、什么时候重新计算矩形每一环都要排清楚。上面的完整代码是一个最小骨架真正接进业务时建议把这些逻辑收拢成独立的控制器或自定义 hook别散落在各个点击回调里。另外一个经验是如果动画中间态做不到像素级完美不要死磕把过渡曲线调成先快后慢的节奏比如cubic-bezier(0.22, 0.8, 0.36, 1)用户感知到的是流畅度而不是某一帧的精确对齐。流畅的过渡加上稳定的状态管理比任何花哨的技巧都管用。 
长河君 · 2026/10/13 15:30:32 · 阅读 1.2k 前端全屏缩放动画：FLIP坐标换算与transform实践指南
做了这么多年前端全屏缩放这类交互我接过不少次。很多人一开始都觉得不就是点击卡片加个transition让它放大到铺满屏幕嘛能有多难真上手才发现动画要么是从角落斜着飞出去要么干脆闪现到全屏、中间的过渡过程完全消失。这篇文章就以图片卡片全屏预览为例把背后的坐标换算、动画原理、完整代码和几个我踩过的坑一次讲清楚。适合正在做相册预览、商品详情、富文本配图这类交互的开发者参考。先给结论全屏缩放的核心不是“transition 加没加对”而是你怎么把一个元素在屏幕上的旧位置用 transform 映射到全屏的新位置。这套映射关系搞懂了任何元素——图片、卡片、弹窗——都能做出顺滑的缩放过渡。1. 全屏缩放动画为什么总做歪先搞清 transform 坐标系1.1 一个“直接放大十倍”的失败案例最早我见过一个项目同事给全屏状态写了这么一段 CSS.card { transition: transform 0.4s ease; } .card.fullscreen { position: fixed; inset: 0; transform: scale(10); }他当时的思路是先把元素position: fixed铺满屏幕再用scale(10)从正常尺寸放大。结果动画一跑元素不是从卡片中心放大的而是从屏幕某个角落斜着“飞”到中间的完全不是预期效果。为什么因为scale(10)是以元素自身的中心默认 transform-origin: 50% 50%为原点放大的。一张 200×300 的卡片在屏幕左上角它的中心大概在 (100, 150)放大十倍后中心点还是 (100, 150)但矩形宽度变成 2000左边和上边会往负方向延伸出去一大截。也就是说当它放大到全屏尺寸时位置早就偏出了视口视觉上自然就是“歪着飞”。这类问题的根源是大多数人对transform的理解停留在“缩放就是变大变小”忽略了缩放中心这个变量。而全屏缩放动画恰恰要精确控制缩放中心才能保证元素从原位置“原地涨开”到全屏。1.2 缩放中心与视觉锚点的错位transform-origin决定了缩放的原点。默认情况下它是50% 50%也就是元素盒子的正中心。当你只写scale(2)时元素围绕自己的中心放大——左上角随之向右下方移动移动距离等于原宽度的一半。这种“以中心为锚点”的缩放在普通 hover 效果里没问题但用在“全屏铺满”这种需要精准落位的场景里麻烦就来了因为全屏后的元素视觉锚点应该是视口的左上角而缩放过程中的锚点却是元素本身的中心。这两个锚点对不上于是无论你 scale 参数怎么调动画总是差那么一截手动试出来的数字又只对当前这一个元素有效换一个卡片就全乱。日常凡是涉及“从 A 位置精确过渡到 B 位置”的动画都不要依赖默认中心缩放直接把transform-origin设为0 0把缩放锚点固定到左上角。这是 FLIP 方案里最省心的起点。如果还是觉得抽象可以想象放大镜你拿着放大镜看地图想让地图上某个点放大后还停在原来的屏幕位置就得同时移动放大镜的位置。transform里的translate就是那只移动放大镜的手scale就是放大倍数两者必须配合缺一个都会跑偏。2. 一套通用的数学映射从原位置到全屏位置的位移与缩放计算2.1 用 getBoundingClientRect 采集前后两个状态业界有个很成熟的做法叫 FLIP就是 First、Last、Invert、Play 四个单词的首字母先记录元素动画前的位置First再让元素变成目标状态、记录目标位置Last然后通过transform把元素从 Last 状态“伪装”回 First 状态Invert最后播放过渡让它从 First 平滑移动到 Last。这里的关键是那两个位置记录。浏览器提供了现成的方法const rect element.getBoundingClientRect();getBoundingClientRect()返回的是元素相对于视口的坐标包含left、top、width、height。视口坐标恰好对应position: fixed的坐标体系所以无论是记录原始位置还是计算全屏位置都用它准没错。实际操作里First 是点击瞬间记录的元素原始矩形Last 则是把元素设为position: fixed; inset: 0之后再取一次矩形。正常情况下 Last 就是left: 0, top: 0, width: 视口宽, height: 视口高。如果你的项目里元素用了box-sizing: border-box读取到的尺寸也包含边框正好和视觉一致。2.2 以左上角为原点的 FLIP 计算公式拿到 First 和 Last 两个矩形后Invert 参数的计算就非常机械了。先把transform-origin固定为0 0const dx first.left - last.left; const dy first.top - last.top; const sx first.width / last.width; const sy first.height / last.height; element.style.transform translate(${dx}px, ${dy}px) scale(${sx}, ${sy});为什么这是对的拆开来看。应用这组 transform 之前元素已经处于 Last 状态也就是铺满整个视口、左上角在 (0, 0)。然后scale(sx, sy)以左上角为原点把元素尺寸缩放到 First 状态的大小translate(dx, dy)再把左上角从 (0, 0) 移动到 First 状态的left/top。两步叠加元素就从“全屏状态”变回了“原始状态”的视觉呈现。此时页面看起来什么也没发生只是卡片还在原来的位置但 DOM 里它其实已经是全屏定位了。举个例子。假设一张卡片原始矩形是left: 120, top: 180, width: 240, height: 160视口是 1920×1080const dx 120 - 0; // 120 const dy 180 - 0; // 180 const sx 240 / 1920; // 0.125 const sy 160 / 1080; // 约 0.148 element.style.transform translate(120px, 180px) scale(0.125, 0.148);你可能会困惑全屏动画一般不都是放大吗为什么 scale 小于 1因为这里 apply 的是 Invert我们是把一个已经全屏的元素先缩小回原位然后才通过播放过渡让它“展开”到全屏。数学上先缩小再放大视觉上就成了平滑的放大动画。第一次接触 FLIP 的人都会在这绕一下想明白就通了。注意 transform 顺序不能反过来。CSS 里translate(...) scale(...)表示先 scale 后 translate如果写成scale(...) translate(...)translate 的值会被 scale 因子再缩放一遍位置就错了。2.3 为什么必须用 transform 而不是直接改宽高和坐标有些朋友可能想过另一种实现给元素设置transition: all然后直接改left/top/width/height从卡片尺寸过渡到全屏尺寸。这个方法能跑但性能和效果都不好。原因在于left/top/width/height都是布局属性。每次改动浏览器都要重新计算布局layout再做绘制paint最后才到合成composite。元素全屏放大过程中整个文档流都会被影响尤其当页面里有很多图片、文字时每一帧重排都会带来明显的卡顿。而transform走的是合成器线程元素只是被 GPU 平移/缩放不影响文档流中的兄弟元素也不需要重新布局。这也是浏览器里少数的“合成属性”之一另一个常用的是opacity在这两者上做动画帧率最容易做到稳定流畅。所以全屏缩放这套方案的黄金准则就是结构状态用 class 切换视觉位置交给 transform动画过程绝不碰布局属性。3. 完整可复制代码图片卡片全屏预览的过渡动画3.1 HTML/CSS/JS 组合实现下面这份代码可以直接拷贝到一个空 HTML 文件里跑起来。我用 CSS 渐变代替真实图片方便你本地测试换真实图片时把img标签放进去即可。div classgrid idgrid div classmedia-card div classthumb stylebackground-image: linear-gradient(135deg, #667eea, #764ba2)/div /div div classmedia-card div classthumb stylebackground-image: linear-gradient(135deg, #f093fb, #f5576c)/div /div div classmedia-card div classthumb stylebackground-image: linear-gradient(135deg, #4facfe, #00f2fe)/div /div /div div classoverlay idoverlay/divbody { margin: 0; padding: 40px; background: #f5f5f5; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } .media-card { border-radius: 12px; overflow: hidden; cursor: zoom-in; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } .thumb { aspect-ratio: 4 / 3; } .media-card.fullscreen { position: fixed; inset: 0; z-index: 10; width: 100vw; height: 100vh; border-radius: 0; cursor: zoom-out; box-shadow: none; } .media-card.fullscreen .thumb { width: 100%; height: 100%; } .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .overlay.show { opacity: 1; pointer-events: auto; }JS 是核心const grid document.getElementById(grid); const overlay document.getElementById(overlay); let activeCard null; let firstRect null; let reverseTransform ; let closing false; grid.addEventListener(click, (e) { const card e.target.closest(.media-card); if (!card) return; if (closing) return; if (card activeCard) { closeCard(card); return; } openCard(card); }); function openCard(card) { activeCard card; firstRect card.getBoundingClientRect(); card.classList.add(fullscreen); const lastRect card.getBoundingClientRect(); const dx firstRect.left - lastRect.left; const dy firstRect.top - lastRect.top; const sx firstRect.width / lastRect.width; const sy firstRect.height / lastRect.height; reverseTransform translate(${dx}px, ${dy}px) scale(${sx}, ${sy}); card.style.transformOrigin 0 0; card.style.transition none; card.style.transform reverseTransform; void card.offsetWidth; card.style.transition transform 0.45s cubic-bezier(0.22, 0.8, 0.36, 1), border-radius 0.45s ease; card.style.transform none; overlay.classList.add(show); document.body.style.overflow hidden; } function closeCard(card) { closing true; card.style.transition transform 0.45s cubic-bezier(0.22, 0.8, 0.36, 1), border-radius 0.45s ease; card.style.transform reverseTransform; overlay.classList.remove(show); document.body.style.overflow ; setTimeout(() { card.classList.remove(fullscreen); card.style.transition ; card.style.transform ; card.style.transformOrigin ; activeCard null; firstRect null; closing false; }, 460); } document.addEventListener(keydown, (e) { if (e.key Escape activeCard) { closeCard(activeCard); } });这份代码的思路是用事件委托监听网格里的卡片点击打开全屏时保存第一个矩形应用反向 transform然后播放过渡关闭时反向播放等动画结束再清理样式。定时器比transitionend稳定因为如果某个浏览器丢了事件就永远清理不掉了。3.2 打开与关闭的双向动画处理打开和关闭看起来像两套逻辑但其实共用同一个reverseTransform。打开时卡片先被设成全屏定位再被 Invert 回原位然后播放到“无 transform”。关闭时卡片保持全屏定位直接把transform设回reverseTransform它就会从全屏状态缩回原位。动画结束后移除fullscreen类卡片回到文档流里的原始位置视觉上不会有任何跳动。一个容易踩的坑是关闭时如果在动画结束前移除fullscreen类元素会瞬间从 fixed 全屏状态弹回文档流动画直接中断成闪现。所以清理动作一定要放在动画完成之后而且要同时清掉内联的transform和transition不然下一次打开时残留的 transition 会把 Invert 也变成过渡导致奇怪的双重动画。3.3 清理状态、滚动锁定和重复点击保护全屏交互有三个容易被忽略的状态管理问题滚动、重复点击、Escape/遮罩关闭。打开全屏时我建议同步锁定document.body.style.overflow hidden否则内容较长时鼠标滚轮还能滚动到底部背后页面跟着晃。关闭时再恢复为。重复点击保护则用closing标志关闭动画进行中不允许再次打开或触发第二次关闭。否则firstRect会被覆盖反向 transform 变成另一套值动画必然错位。你也可以把closing换成“保存当前动画状态”对象更精细地做法是记录一个animationToken每次 setState 前检查 token 是否一致防止异步乱序但小型交互里一个布尔变量足够。实际项目中如果动画开始了又立刻被要求反向最好等当前动画结束再响应下一次操作。强行打断会让 transform 和缓存矩形失配调试起来会非常折磨。4. 现代的新路子View Transitions API 与原生全屏缩放4.1 document.startViewTransition() 的用法如果你不追求兼容到很老的浏览器而且希望代码更精简可以试试 View Transitions API。它的核心思路是你同步修改 DOM浏览器自动记录旧状态快照和新状态快照然后为它们生成过渡动画。对于全屏缩放这种“同一个元素换了尺寸位置”的场景只需要给元素设置同一个view-transition-name浏览器就会自动把它从旧位置“推”到新位置。function openWithViewTransition(card) { if (!document.startViewTransition) { openCard(card); // 降级到手动 FLIP return; } const transition document.startViewTransition(() { card.classList.add(fullscreen); overlay.classList.add(show); document.body.style.overflow hidden; }); }配合 CSS.media-card.fullscreen { view-transition-name: card-zoom; } ::view-transition-group(card-zoom) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.36, 1); }写法上有一个硬性要求view-transition-name在同一个时刻必须是唯一的。如果页面里有多张卡片每张都叫card-zoom浏览器会直接忽略或者动画错乱。所以现实项目里通常给每张图片卡片分配一个独立名字比如card-1、card-2全屏时保持同一个名字不变cards.forEach((card, i) { card.style.viewTransitionName card-${i}; });关闭时调用另一个startViewTransition把fullscreen类和 overlay 状态移除浏览器同样会自动处理回缩动画。4.2 手写 FLIP 与 View Transitions 的选择有人可能会问既然有了原生方案手写 FLIP 是不是多余了我用一个对比表说明各自的适用场景对比维度手写 FLIPView Transitions API兼容性几乎所有现代浏览器Chromium 内核支持较新版 Safari 也跟进Firefox 需观望实现成本需要自己管理快照、反向 transform、清理少写很多代码回调里直接改 DOM 状态可控性每一帧、每个曲线都完全掌控通过 CSS 动画调整但快照机制细节有限制性能取决于开发者是否只动 transform/opacity浏览器原生合成快照通常更稳额外效果需要自己给背景、文字写淡出可以整页过渡影子、边框、背景都自动覆盖我的判断标准是历史老项目、动画有特殊要求、或者要兼容比较旧的浏览器时手写 FLIP 更可靠内容型网站、卡片交互不是特别复杂、希望快速上效果时View Transitions 引入的代码量很少性价比更高。4.3 兼容性与降级策略View Transitions API 最大的不确定因素就是兼容性。代码里我习惯做一次能力检测有就用没有就退回手写 FLIPif (document.startViewTransition) { // 原生过渡 } else { // 手动 FLIP 或者干脆直接切换 class }降级时即使不做动画也要保证交互是完整的卡片能打开、能关闭、滚动锁定要生效。毕竟动画是锦上添花功能可用才是底线。另外要提醒一句这里讲的“全屏”是页面内的视觉全屏不是浏览器原生的 Fullscreen API。不要把元素requestFullscreen()出来那个会把整个页面变成浏览器全屏模式和我们要的“元素放大铺满视口”是两件事经常有人混到一起。5. 实战中我踩过的几个坑从图片拉伸到动画闪跳5.1 宽高比不一致导致图片变形卡片是 4:3屏幕是 16:9直接缩放整个卡片动画过程里图片不可避免地会被拉伸。尤其当缩放比例很大时中间帧的图片会糊成一片。这个问题没有绝对完美的解法三种策略按场景选第一种是接受短暂变形。动画只有 400 多毫秒人眼注意力集中在轮廓运动而不是细节很多成熟产品都是这样做的体验并不差。第二种是适配背景图。把图片做成background-image容器用background-size: cover。缩放过程中背景图也会被拉伸但因为是一整块背景变形会比内联img温和一些。第三种是双图切换动画开始时用原图缩略图等动画进入尾声、视觉焦点开始注意到内容细节时再把全屏层里的图片替换成高分辨率版本。全屏层内部的图片替换可以用opacity交叉淡化掩盖视觉上几乎察觉不到。实现成本略高一点但适合高清图库类产品。5.2 动画“闪一下”就结束强制 reflow 与双重 rAF这个坑我印象很深。很早之前写 FLIP 动画代码长这样element.style.transform reverseTransform; element.style.transition transform 0.45s ease; element.style.transform none;打开浏览器动画完全不见卡片像闪现一样直接全屏。原因是浏览器很聪明地做了样式合并同一个 JavaScript 执行栈里连续改了三次样式浏览器只会在渲染时应用最后的值等于你根本没给过渡留出“从 A 到 B”的起点。修复方法是在设置起点状态之后、设置终点状态之前强制浏览器同步布局一次。最便宜的一招就是读取offsetWidth或者再调一次getBoundingClientRect()element.style.transform reverseTransform; element.style.transition none; void element.offsetWidth; // 强制 reflow让起点样式生效 element.style.transition transform 0.45s ease; element.style.transform none;只调一次也可以因为在设置reverseTransform之前你已经把fullscreen类加上并读取过getBoundingClientRect()那次读取本身就会触发样式计算。不过为了代码可读性和防御性我习惯显式写一行void element.offsetWidth一目了然。如果用了requestAnimationFrame方案也要注意嵌套两帧第一帧设置起点状态第二帧再设置终点状态。否则有时候浏览器仍然会把两帧合并到同一渲染批次里。相比而言强制 reflow 更直接也更省心。5.3 祖先 transform 让 fixed 定位失效迁移 DOM 占位符这是全屏缩放中最隐蔽的一个问题。position: fixed一般来说是相对视口定位的但有一个例外如果元素的任意祖先带有transform、filter或perspective这个元素会改为相对那个祖先定位相当于退化成absolute。也就是说只要你的卡片嵌套在一个开了transform动画的容器里你给它设全屏position: fixed; inset: 0它并不会铺满视口而是铺满那个容器的范围。动画自然是错的。解决思路有两种。一种是保证目标卡片所在的祖先链上没有任何 transform 相关属性但这在真实项目里很难保证。另一种更稳的做法动画前把卡片临时迁移到body下同时在原位置插入一个占位符防止文档流塌陷。function moveToBody(card, firstRect) { const placeholder document.createElement(div); placeholder.style.width firstRect.width px; placeholder.style.height firstRect.height px; card.parentNode.insertBefore(placeholder, card); document.body.appendChild(card); return placeholder; }关闭动画结束并清理完样式后再把卡片迁回原位置同时移除占位符。要注意迁移到 body 之后卡片原来的 CSS 上下文比如父容器宽度、.grid的布局可能会变化所以全屏样式里一定要显式给定width: 100vw; height: 100vh不要依赖父级。5.4 动画结束后的合成层清理与 will-change 节制动画过程中浏览器为了在合成器线程上跑 transform会把元素提升为单独的合成层。这个过程本身有一定内存开销。很多教程喜欢给动画元素加will-change: transform来“优化”但如果你给一屏里几十张卡片都加上浏览器就要为每张卡片都分配合成层内存和渲染开销直接爆炸。我的做法是除非动画过程中真的出现掉帧卡顿否则不加will-change。加了之后也要在动画结束后移除。以及关闭动画结束后要记得清掉内联transform和transition否则元素会一直保持合成层状态白白占用 GPU 内存。还有个小细节全屏动画覆盖范围很大如果背景里恰好有大量图片或者大尺寸阴影动画过程中可以先把遮罩层的opacity拉高一点让背景不那么抢眼opacity也是合成属性过渡不会卡。最后再把这招扩展到更复杂的场景如果你想让两个不同元素之间做“共享元素过渡”比如列表页点一张卡片跳到详情页里的同题材图上这套数学依然适用——把 Last 状态的目标矩形换成另一个元素的位置和尺寸就行区别只是 dx/dy/sx/sy 换成那组数值。核心思路完全一样。我在实际项目里用下来最深的体会是全屏缩放过渡这个交互难点从来不是动画怎么写而是状态怎么收干净——什么时候锁滚动、什么时候清理 transform、什么时候重新计算矩形每一环都要排清楚。上面的完整代码是一个最小骨架真正接进业务时建议把这些逻辑收拢成独立的控制器或自定义 hook别散落在各个点击回调里。另外一个经验是如果动画中间态做不到像素级完美不要死磕把过渡曲线调成先快后慢的节奏比如cubic-bezier(0.22, 0.8, 0.36, 1)用户感知到的是流畅度而不是某一帧的精确对齐。流畅的过渡加上稳定的状态管理比任何花哨的技巧都管用。