面向初学者的 CSS 视图过渡指南 | MDN 博客

想象一个网站在页面间平滑过渡，例如从 index.html 到 about.html，而没有典型的突兀重载。这种无缝导航体验现已通过现代浏览器支持的视图过渡 API 实现。历史上，这种平滑动画过渡主要限于单页应用（SPA），它们动态更新内容而无需完整页面重载。然而，随着 CSS 和浏览器能力的进步，多页应用（MPA）现在也能提供类似效果，提升用户体验且无需复杂的 JavaScript 实现。\n\n为澄清，MPA 和 SPA 代表两种基础的网页开发方式。MPA 通过每次导航从服务器加载新的 HTML 页面，导致完整页面刷新。这种模式构建和管理简单，尤其适合拥有众多独立页面的大型应用。相反，SPA 加载单个 HTML 页面，并使用 JavaScript 动态修改内容，允许更快的交互和更流畅的用户体验，但代价是更复杂的客户端路由和状态管理。\n\n视图过渡 API 及 CSS @view-transition 规则引入了 MPA 原生支持平滑动画过渡的能力。此开发以渐进增强为设计理念，确保即使在不支持这些功能的浏览器中，网站仍能正常工作，因为 CSS 被视为可选增强。关于浏览器兼容性，CSS 视图过渡规范第一级（支持单页面内过渡）目前被 Chrome、Edge 和 Safari 支持，Firefox 正在其测试版中支持。第二级（支持跨页面过渡）在 Chrome 126+、Edge 126+ 和 Safari 18.2+ 中可用，Firefox 未来预计支持。\n\n实现基本视图过渡非常简单。只需添加一行 CSS——@view-transition { navigation: auto; }——即可在 MPA 中启用页面间的平滑过渡。例如，两个演示页面 index.html 和 hobbies.html，分别包含简单内容和导航链接，可通过 CSS 设置字体样式、布局限制和各自不同的背景色，同时关键的 @view-transition 规则使浏览器能够动画导航。\n\n除了默认功能，开发者还可自定义过渡体验。通过利用特殊的 CSS 伪元素 ::view-transition-old(root) 和 ::view-transition-new(root)，分别针对离开和进入的页面。例如，给新页面应用名为 slide-from-right 的滑入动画，使其从视口右侧平滑进入。对应地，给旧页面应用 slide-to-right 动画，在返回时滑出。这些动画替代浏览器默认的交叉淡入淡出过渡，展示了视图过渡 API 在无需 JavaScript 的情况下创建定制效果的灵活性。\n\n总之，CSS 视图过渡的出现标志着多页网页应用的重要演进。开发者现在可以用极少的开销和不牺牲兼容性的前提下，通过平滑动画丰富用户体验。这一能力缩小了 MPA 与 SPA 之间的体验差距，使复杂动画导航在更广泛的网页架构中变得可及。