CSS View Transitions API实测：页面切换动效不需要JS了

Chrome 126正式支持CSS View Transitions API以后，我花了两个周末把项目里的页面切换动画全部用原生CSS重写了一遍。之前用的是React Router + framer-motion，bundle多了12KB，现在全删了。体验没降，代码少了一半。

这个东西解决什么问题

以前做SPA页面切换动效，要么用JS库管理动画状态，要么自己写一堆transform计算。View Transitions API的思路不一样：浏览器自动拍两张快照——过渡前的页面状态和过渡后的——然后你在CSS里定义这两张快照之间怎么过渡。浏览器帮你处理中间的插值。

最基础的单页过渡只需要四行CSS：

::view-transition-old(root) { animation: fade-out 0.3s; }
::view-transition-new(root) { animation: fade-in 0.3s; }

浏览器自动在DOM变化时触发过渡。比用framer-motion写20行JS干净太多了。

真正好用的是多元素过渡

每个要过渡的元素加一个view-transition-name属性就行。比如从列表页点进详情页，列表卡片里的缩略图自动"飞"到详情页的大图位置：

列表页：.card-thumb { view-transition-name: hero-image; }

详情页：.detail-hero { view-transition-name: hero-image; }

浏览器会找到同名的view-transition-name，自动做位置、大小、圆角的平滑过渡。效果类似iOS里的共享元素过渡，但不用任何JS。我在项目里给所有内容卡片加了这行属性，从列表到详情、从详情回列表，过渡自然得让人以为是原生应用。

实际踩的坑

第一，每个页面上同一个view-transition-name只能出现一次。如果列表页有10张卡片，每张都给hero-image会导致浏览器跳过过渡。解决方法是在点击时动态设置view-transition-name（用JS在click事件里给当前卡片设置，过渡完成后再清掉）。

第二，过渡期间的DOM状态。在document.startViewTransition()回调里修改DOM后，浏览器会保留旧DOM的截图直到过渡结束。这意味着你修改的DOM在整个过渡期间用户看到的是截图——如果你改了滚动位置，截图和实际位置可能对不上。

第三，Safari支持。2026年7月，Safari 18.2开始支持跨文档View Transitions（MPA场景），但单页内的仍然需要@supports (view-transition-name: none)做fallback。Safari不支持的时候会自动降级为无过渡——不会报错也不会白屏。

值得上手吗

如果你的页面切换需要动效，而且主要用户用Chrome/Edge（占比大概75%-80%），View Transitions API是目前最干净的方案。比任何JS动画库都轻（零bundle），性能更好（浏览器原生实现），API简单（就是几个CSS伪元素）。唯一的问题就是Safari还在追进度，但fallback成本低。我在三个项目里用了，还没遇到需要回退的情况。

标签： CSS View Transitions API 网页动效 前端开发