Web新特性，视图过渡（View Transition）视图过渡（View Transition）是一个非常棒的Web新

视图过渡（View Transition）是一个非常棒的Web新特性，可以让网页之间的切换动画变得非常简单和流畅。

什么是视图过渡 (View Transitions)？

简单来说，视图过渡（View Transition） 是一套浏览器 API 和 CSS 规则，它允许你在两种不同的视图状态之间创建平滑的动画效果。这极大地改善了用户体验，让页面跳转不再是生硬的“闪烁”，而是像原生应用一样流畅的动画。

这个特性最初是为单页应用（SPA）设计的，但现在已经扩展到支持传统的多页应用（MPA），就像你代码里实现的那样。

开启过渡

首先创建两个单独的页面index.html和next.html

文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
            background-color: rgb(130, 206, 130);
        }
    </style>
</head>
<body>
    <h1>这是前一个页面</h1>
    <p>实现MPA（多页应用程序）动画过度</p>
    <p>借助View Transition API（以及现在的CSS @view-transition at-rule）,实现MPA（多页应用程序）动画过度</p>
    <p>
        <a href="./next.html">点击跳转到next页面</a>
    </p>
</body>
</html>

文件 next.html

在index.html和next.html中都加入下面这段CSS，这是启用跨页面导航过渡的关键。

 @view-transition {
   navigation: auto;
 }

默认过渡动画效果

视图过渡（View Transitions）的默认过渡效果是“交叉淡入淡出”（Cross-fade） 。

具体来说，当过渡发生时：

旧页面的快照 (::view-transition-old) 会从完全不透明（opacity: 1）平滑地变为完全透明（opacity: 0）。
新页面的快照 (::view-transition-new) 会同时从完全透明（opacity: 0）平滑地变为完全不透明（opacity: 1）。

这两个动画同时进行，给用户一种旧内容消失、新内容浮现的平滑感觉，而不是生硬的页面刷新。

自定义过渡效果

在next.html文件中增加下面这段CSS：

 @keyframes slide-from-right {
    from {
        transform: translateX(100vw);
    }
    to {
        transform: translateX(0);
    }
    }

    ::view-transition-old(root) {
        animation: none;
    }

    ::view-transition-new(root) {
        animation: slide-from-right 0.3s;
    }

当从 index.html 点击链接跳转到 next.html 时，你会看到：

旧页面 (index.html) 立即消失，同时新页面 (next.html) 会在 0.3 秒内从屏幕右侧平滑地滑入，最终占据整个屏幕。