CSS视图过渡入门指南：让多页面应用拥有丝滑动画

news/2025/11/27 20:10:59/文章来源:https://www.cnblogs.com/qife122/p/19279304

CSS视图过渡入门指南

想象一下，你的网站可以在页面之间流畅地动画过渡 - 比如从index.html跳转到about.html - 而不会出现令人不适的重新加载。由于现代浏览器对视图过渡API的支持，这现在已经成为可能。

视图过渡曾经是单页面应用(SPA)的专属功能。在本文中，我们将探索视图过渡如何为多页面应用(MPA)带来流畅的动画导航。

MPAs与SPAs快速回顾

多页面应用(MPA)和单页面应用(SPA)是Web开发的两种常见方法，各有优缺点。

MPA为每次导航从服务器加载新页面，导致完整的页面重新加载。对于具有许多不同页面的大型应用，MPA构建更简单。

另一方面，SPA加载单个HTML页面，并通过JavaScript动态更新其内容，提供更快的交互和更流畅的用户体验，但通常需要更复杂的客户端路由和状态管理。

长期以来，流畅的动画过渡仅在SPA中可能实现。通过视图过渡API - 以及现在的CSS @view-transition规则 - MPA现在可以实现类似的效果。CSS视图过渡设计时考虑了渐进增强。因此，如果浏览器不支持它们，网站仍然可以正常工作，因为CSS被视为提示，仅在支持时应用。

视图过渡的浏览器支持

在我们深入了解如何使用此功能之前，值得注意的是目前支持视图过渡的地方。CSS视图过渡规范有两个级别：

级别1使用视图过渡API在单个页面内启用过渡。这已经在Chrome、Edge和Safari中得到支持。Firefox支持在版本144中可用（目前处于测试阶段）。
级别2通过@view-transition规则允许跨多个页面的过渡。目前支持Chrome 126+、Edge 126+和Safari 18.2+。在撰写本文时，级别2在Firefox中仍在进行中，但预计将来会支持。

在没有视图过渡支持的浏览器中，网站将继续使用标准页面导航正常工作，因为过渡被视为渐进增强，不会破坏您的网站。

创建第一个视图过渡

让我们深入看看视图过渡的实际效果。

作为最简单的示例，您可以通过向代码中添加几行CSS来启用过渡：

@view-transition {navigation: auto;
}

就是这样！基本版本只有几行CSS，如果您问我，这真是令人难以置信。

为了看到这行代码的效果，让我们构建两个演示页面。您也可以尝试将此代码添加到任何现有的多页面应用程序中。

第一个页面index.html只包含一个标题、几个段落和指向第二个页面的链接：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Home</title><link rel="stylesheet" href="style.css">
</head>
<body class="index"><h1>Welcome to my site</h1><p>This is the home page.</p><a href="hobbies.html">Check out my hobbies</a>
</body>
</html>

让我们准备好第二个页面hobbies.html。这也是一个简单的页面，包含一个标题、两个短段落和返回第一个页面的链接：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Hobbies</title><link rel="stylesheet" href="style.css">
</head>
<body class="hobbies"><h1>My Hobbies</h1><p>I enjoy reading and coding.</p><p>On weekends, I like to go hiking.</p><a href="index.html">Back to home</a>
</body>
</html>

最后，将以下配方添加到您的style.css文件中：

body {font-family: system-ui;max-inline-size: 400px;padding: 20px;text-align: center;margin: auto;box-sizing: border-box;line-height: 1.5;&.index {background-color: oklch(0.9529 0.0444 332);}&.hobbies {background-color: oklch(0.9588 0.0617 184.24);}
}a {color: oklch(0.0867 0.0419 261.53);
}

这就是创建视图过渡所需的一切。只需这一行CSS，您将看到两个页面之间的无缝过渡。过去，这种平滑过渡仅在使用JavaScript的SPA中可能实现。使用CSS @view-transition规则，浏览器现在可以原生处理多页面应用程序中的过渡，而无需JavaScript。

超越默认过渡

现在让我们更进一步，自定义视图过渡。在这里，我们将创建一个滑入和滑出效果，这是一个简单的动画，用于理解视图过渡在底层的工作原理。

让我们为两个HTML页面添加两个不同的样式表。将此添加到index.html：

<link rel="stylesheet" href="index.css">

...并将此添加到hobbies.html：

<link rel="stylesheet" href="hobbies.css">

是时候熟悉一些控制视图过渡的CSS选择器（伪元素）了：

::view-transition-old - 表示旧页面的伪元素
::view-transition-new - 表示新页面的伪元素

让我们了解这些伪元素如何工作：::view-transition-old和::view-transition-new伪元素分别引用旧页面和新页面，允许我们在它们之间设置过渡样式。当我们从index.html导航到hobbies.html时，旧页面是我们来自的页面（index.html），新页面是我们前往的页面（hobbies.html）。

让我们添加一个滑动动画，使hobbies.html以平滑的滑动效果进入。我们将此动画称为slide-from-right。将以下代码添加到hobbies.css：

@view-transition {navigation: auto;
}::view-transition-new(root) {animation: none;animation-name: slide-from-right;
}@keyframes slide-from-right {from {transform: translateX(100%);}to {transform: translateX(0);}
}

注意：
默认情况下，浏览器的视图过渡动画通过在旧页面和新页面之间动画化它们的不透明度并应用mix-blend-mode: plus-lighter来创建交叉淡入淡出效果。

在此示例中，我们清除了浏览器的默认动画（animation: none）并用slide-from-right动画替换了它。如果保留默认的交叉淡入淡出，您可以尝试不同的mix-blend-mode值以查看各种过渡效果。

这是滑入效果的样子：

![滑入效果演示]

现在让我们通过添加另一个滑动动画来完成此效果，以确保hobbies.html页面以相同的方式滑出。在这种情况下，我们将从hobbies.html导航到index.html；因此，hobbies.html现在是我们的旧页面，index.html是新页面。

我们将此动画称为slide-to-right。将此代码添加到index.css：

@view-transition {navigation: auto;
}::view-transition-old(root) {animation: none;animation-name: slide-to-right;
}@keyframes slide-to-right {from {transform: translateX(0);}to {transform: translateX(100%);}
}

注意我只在两个方向上都动画化了hobbies.html，而没有为index.html添加任何动画。如果您喜欢，可以同时动画化两者。

这是过渡最终的样子，包括hobbies.html的滑入和滑出效果：

![完整过渡效果演示]

查看演示页面以在浏览器中查看结果。如果您想扩展此演示，请随意使用mdn/dom-examples存储库中的代码，并为index.html页面添加动画（在index.css文件中查找animation: none）。

我很高兴看到您想出的所有酷炫的视图过渡。