[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fxEPNgBHU5Snh4KcRkiO6pmxda1q4pf2nyIGcZ3zQDQI":3},{"item":4,"related":46},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":35,"sourceName":36,"sourceUrl":37,"status":38,"seoTitle":39,"seoDescription":39,"canonicalUrl":39,"isFeatured":40,"sno":41,"sortOrder":42,"publishedAt":43,"updatedAt":44,"createdAt":45},"4533257a-fefb-474e-8df8-1cbf32415c48","article","网页也能像 App 一样丝滑切场？浏览器在动画期间做了什么","view-transition-api-explained","页面切换时，一个元素仿佛从旧位置飞到新位置，背后并不一定是两套页面同时运动。View Transition API 会协调旧视图快照、新视图和过渡层。本文用舞台换景解释其工作方式、体验价值、性能与无障碍边界。","你在商品列表点开一双鞋，缩略图平滑放大到详情页中央；返回时，它又像记得原位一样缩回列表。过去实现这种效果，开发者常要同时保存新旧页面、计算元素位置、处理动画和清理节点。稍有不慎，页面会闪烁，按钮还能在旧画面上被误点。\n\nView Transition API 把一部分换景工作交给浏览器。它不是让整个网页真的飞来飞去，而是协调旧视图快照、新视图和覆盖在页面上方的动画层。\n\n![Chrome 开发者工具中视图过渡伪元素的层级与样式](https:\u002F\u002Fdeveloper.chrome.com\u002Fstatic\u002Fblog\u002Fview-transitions-in-2025\u002Fimage\u002Fdevtools-view-transition-class.png)\n\n## 把网页切换想成舞台换景\n\n舞台要从客厅换成森林，最难的不是把新布景搬上来，而是让观众看不到混乱过程。浏览器开始视图过渡时，会记录旧状态的视觉快照；应用完成内容更新后，浏览器捕获新状态，并在专门的过渡层中让旧图像淡出、新画面显现。\n\n如果某个元素设置了 `view-transition-name`，浏览器可以把旧页面和新页面中的对应元素配对，分别计算位置与大小变化。观众看到商品图从列表飞到详情，底层可能只是旧快照与新元素之间的插值动画。\n\n```mermaid\nflowchart LR\n    A[记录旧视图快照] --> B[应用更新页面内容]\n    B --> C[捕获新视图]\n    C --> D[配对同名元素]\n    D --> E[在过渡层播放动画]\n    E --> F[移除快照显示新页面]\n```\n\n根据 [MDN 的说明](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transition_API)，这套机制既能处理单页应用内部的状态变化，也能用于多页面之间的导航。浏览器还提供代表旧视图、新视图和分组的伪元素，让开发者用 CSS 定制效果。\n\n## 动画为什么能降低“等待感”\n\n过渡不会让网络请求凭空加速，却能保持视觉连续性。用户看到同一张图片移动到新位置，会更容易理解“我刚才点的东西现在在哪里”，也不容易把页面切换误认为故障。MDN 将减少认知负担、保持上下文和降低感知延迟列为视图过渡的价值。\n\n但动画只能改善感受，不能替代真实性能。若新页面要等十秒才出现，再华丽的转场也会变成拖延。合理做法是同时优化资源加载、响应速度和过渡设计。\n\n## 快照不是免费午餐\n\n大型页面快照和复杂滤镜会消耗内存与图形计算。大量元素各自参与过渡，还可能增加维护难度。设计时应优先挑真正帮助理解的关键元素，而不是让所有文字和按钮都旋转飞入。\n\n动态内容也要小心。视频、光标、持续更新的图表在快照里可能短暂停住；固定定位元素若配对错误，会出现跳动。开发者需要在真实设备上测试，而不能只在高性能电脑里看一次演示。\n\n## “丝滑”必须允许用户拒绝\n\n部分用户会因大幅缩放、旋转和视差动画感到眩晕。网页应尊重系统的 `prefers-reduced-motion` 设置，在用户偏好减少动态效果时缩短、简化或跳过动画。\n\n视图更新后的焦点位置、阅读顺序和返回操作也必须正确。视觉上元素留在原处，不代表屏幕阅读器或键盘焦点自动理解了变化。过渡层负责画面，语义与无障碍仍是应用的责任。\n\n## 好转场不是展示技术，而是解释变化\n\n购物图片从缩略图进入详情、日历项目从列表展开为编辑面板，这些动画在说明对象之间的关系。相反，每次翻页都加入长时间淡入，往往只会拖慢操作。\n\nView Transition API 的价值，是让网页开发者不必亲手搭建整套新旧画面管理机制，从而把注意力放回交互意图。浏览器终于像舞台监督一样帮忙换景，但一场好戏仍取决于：哪些变化值得被观众看见，哪些应该安静地瞬间完成。","\u002Fuploads\u002F2026-08-14\u002Fdbb498be-160e-45a6-b053-dd3c74b2a75e.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31],{"id":24,"name":25,"slug":26},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app",{"id":28,"name":29,"slug":30},"4c2bbea6-eab7-40a8-8447-1de478ff7749","分析","analyse",{"id":32,"name":33,"slug":34},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug","资料来源","MDN：View Transition API","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FView_Transition_API","published",null,false,60,0,"2026-08-14T00:00:00.000Z","2026-08-14T05:38:12.861Z","2026-08-14T03:06:13.955Z",[47,54,63],{"id":48,"type":6,"title":49,"slug":50,"summary":51,"coverUrl":52,"authorName":14,"sno":41,"publishedAt":43,"createdAt":53},"e94c06b4-295e-4888-aeaf-023fe695f23b","为什么同一家网站越逛越省流量？网页也有共同词典","http-compression-dictionary-transport","普通 HTTP 压缩只在单个响应内部寻找重复，共享压缩字典则能引用浏览器已经拥有的旧资源，只传新版与旧版之间的差异。本文从网站常用语词典讲起，解释压缩协商、字典传输、缓存收益及部署风险。","\u002Fuploads\u002F2026-08-14\u002Fca5428b4-e355-49cf-b664-93068e017841.jpg","2026-08-14T03:06:14.545Z",{"id":55,"type":6,"title":56,"slug":57,"summary":58,"coverUrl":59,"authorName":14,"sno":60,"publishedAt":61,"createdAt":62},"d8cd5ddb-84fe-406c-9e2d-49a74aa73aed","网站为什么越来越少让你拼图验证“我是人”","captcha-turnstile-how-human-verification-works","新一代人机验证会在浏览器后台运行挑战并生成短期令牌，再由网站服务器确认结果。本文解释它为什么减少交互、如何防止重放，以及它的误判边界。","\u002Fuploads\u002F2026-09-12\u002F6d69d6f0-e936-4c53-92e2-3412dd3fde18.jpg",44,"2026-09-12T00:00:00.000Z","2026-09-12T04:45:49.580Z",{"id":64,"type":6,"title":65,"slug":66,"summary":67,"coverUrl":68,"authorName":14,"sno":69,"publishedAt":70,"createdAt":71},"e5b311d7-121f-4fd2-bac6-d7b9f4bee903","PDF 里的电子签名，为什么不是贴一张手写图片","pdf-digital-signature-how-it-works","手写签名图片只能说明页面上有一张图，PDF 数字签名则通过私钥、公钥和数字证书验证签名者身份，并检测签名后的文档是否被修改。本文解释两者的关键差别。","\u002Fuploads\u002F2026-09-13\u002F166eb6f1-a717-4cc5-a869-cc1d99584037.jpg",46,"2026-09-13T00:00:00.000Z","2026-09-13T09:35:50.299Z"]