**CSS** `view-transitions`：跨页面动画，告别生硬跳转，未来已来

CSS View Transitions：告别PPT式切换，网页也能丝滑顺畅

有没有那么一瞬间，你觉得网页的跳转就像PPT翻页，硬邦邦的，毫无感情？点一个链接，页面“唰”的一下就变了，之前的元素仿佛被橡皮擦抹去，新元素又像变魔术一样突然出现。如果你的回答是“YES”，那么恭喜你，我们都曾是“PPT式网页切换”的受害者。

但好消息是，CSS view-transition 的到来，给了我们摆脱这种窘境的机会。它就像一位经验丰富的魔术师，能让网页之间的切换不再生硬突兀，而是充满流畅的动画效果，让用户体验瞬间提升几个档次。

什么是 View Transitions？别被“学术名词”吓跑！

view-transition，直译过来就是“视图过渡”。简单来说，它允许你在页面状态之间切换时，创建平滑的动画效果。想象一下，从商品列表页点击进入商品详情页，不是瞬间切换，而是商品图片缓缓放大，其他元素优雅地移动到合适的位置，整个过程就像一出精心编排的舞台剧，让人赏心悦目。

它能做什么？

页面之间的平滑过渡： 这是最基本的功能，也是最常用的场景。告别“瞬移”般的页面切换，让用户感觉网页更像一个整体，而不是一堆互相独立的页面。
元素级别的动画： 不仅仅是整个页面，你还可以针对特定的元素，比如图片、标题、按钮等，分别设置不同的动画效果。这就像给舞台剧中的演员设计专属的动作，让过渡效果更加个性化。
状态更新的动画： 即使是同一个页面上的状态变化，比如点击“添加到购物车”按钮，也可以通过 view-transition 实现平滑的动画效果，例如购物车图标跳动一下，或者商品图片飞入购物车。
打造原生App般的体验： view-transition 可以让你的网页拥有接近原生App的流畅度和动画效果，提升用户体验，增加用户粘性。

原理揭秘：幕后英雄是谁？

view-transition 的实现原理其实并不复杂，可以概括为以下几步：

捕获当前状态： 当触发页面切换或状态更新时，浏览器会捕获当前页面上所有元素的状态，包括位置、大小、样式等等。
创建“快照”： 浏览器会为每个元素创建一个“快照”，就像给演员拍一张照片，记录下他们当前的样子。
切换到新状态： 浏览器会加载新的页面或应用新的状态。
计算过渡效果： 浏览器会比较旧状态的“快照”和新状态的实际情况，然后计算出最佳的过渡效果，比如元素的移动、缩放、透明度变化等等。
执行动画： 浏览器会根据计算出的过渡效果，逐帧地更新元素的样式，从而实现平滑的动画效果。

简单来说，view-transition就像一位细心的摄影师，它会记录下旧场景的每个细节，然后在新场景中找到对应的元素，并让它们平滑地过渡过去，最终呈现出无缝衔接的效果。

代码实战：让你的网页动起来！

理论讲再多，不如动手实践。下面我们来看一个简单的例子，演示如何使用 view-transition 实现页面之间的平滑过渡。

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>View Transitions Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>首页</h1>
    <a href="detail.html">查看详情</a>
  </main>
</body>
</html>

HTML (detail.html):

<!DOCTYPE html>
<html>
<head>
  <title>详情页</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <h1>详情页</h1>
    <a href="index.html">返回首页</a>
  </main>
</body>
</html>

CSS (style.css):

body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

main {
  max-width: 600px;
  margin: 0 auto;
}

a {
  display: block;
  margin-top: 20px;
  padding: 10px;
  background-color: #f0f0f0;
  text-decoration: none;
  color: #333;
  text-align: center;
}

/* 启用 View Transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

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

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

JavaScript (script.js – 可选, 用于更复杂的过渡):

// 可选：如果你需要更精细的控制，可以使用 JavaScript API
// 比如，在点击链接时手动启动过渡
document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A') {
    event.preventDefault();
    const url = event.target.href;

    document.startViewTransition(() => {
      location.href = url;
    });
  }
});

在这个例子中，我们通过简单的 CSS 代码，实现了页面之间的淡入淡出效果。

解释：

::view-transition-old(root) 和 ::view-transition-new(root)：这两个伪元素分别代表旧视图和新视图。root 指的是整个页面，你也可以替换为更具体的元素。
animation: fade-out both 0.3s; 和 animation: fade-in both 0.3s;：这两行代码分别定义了旧视图的淡出动画和新视图的淡入动画。both 关键字表示动画会在元素应用动画样式之前和之后都应用动画的第一帧/最后一帧的样式。

这个例子虽然简单，但足以让你感受到 view-transition 的魅力。你可以尝试修改 CSS 代码，调整动画效果，甚至可以添加 JavaScript 代码，实现更复杂的过渡效果。

进阶技巧：让你的动画更上一层楼

除了基本的淡入淡出效果，view-transition 还可以实现更复杂的动画效果。下面是一些进阶技巧：

使用 view-transition-name 属性： 这个属性允许你为元素指定一个唯一的名称，然后浏览器会根据这个名称，自动将旧视图中的元素和新视图中的元素关联起来，并创建平滑的过渡效果。这对于实现“共享元素过渡”非常有用，比如商品图片在列表页和详情页之间的平滑放大。

例如：
```

<img src="product.jpg" style="view-transition-name: product-image;">


<img src="product.jpg" style="view-transition-name: product-image;">
```
这样，当从列表页进入详情页时，浏览器会自动将两张图片关联起来，并创建一个平滑的放大动画。
自定义动画效果： 你可以使用 CSS 动画和 JavaScript API，自定义各种各样的动画效果。比如，你可以让元素旋转、缩放、倾斜、改变颜色等等。
处理异步加载： 如果你的页面需要异步加载数据，你需要在数据加载完成后再启动 view-transition，否则可能会出现过渡效果不正确的问题。

浏览器兼容性：未来已来，但仍需等待

虽然 view-transition 功能强大，但目前浏览器兼容性还不够完美。截止到我写这篇文章时，主流浏览器中，Chrome 和 Edge 已经完全支持，Firefox 正在积极开发中，Safari 的支持情况还不明朗。

这意味着，如果你想在生产环境中使用 view-transition，你需要考虑浏览器兼容性问题。你可以使用以下方法：

渐进增强： 先实现基本的功能，然后使用 view-transition 增强用户体验。如果浏览器不支持 view-transition，就回退到默认的页面切换方式。
使用 Polyfill： 虽然目前还没有完美的 view-transition Polyfill，但你可以关注社区的进展，看看是否有可用的解决方案。

总结：告别生硬跳转，拥抱丝滑体验

view-transition 的出现，无疑是网页开发领域的一大进步。它让我们有机会告别生硬的页面跳转，为用户带来更加流畅、自然的浏览体验。虽然目前浏览器兼容性还不够完美，但相信随着时间的推移，view-transition 会越来越普及，成为网页开发的标配。

所以，不妨现在就开始学习 view-transition，为未来的网页开发做好准备。相信在不久的将来，你也能轻松打造出令人惊艳的动画效果，让你的网页脱颖而出！

最后，我想说的是，view-transition 不仅仅是一种技术，更是一种设计理念。它提醒我们，网页不仅仅是信息的载体，更是一个与用户互动的平台。通过精心的动画设计，我们可以让用户感受到网页的温度，从而提升用户体验，增加用户粘性。所以，让我们一起努力，让网页变得更加生动、有趣、充满活力！

CSS `view-transitions`：跨页面动画，告别生硬跳转，未来已来

CSS View Transitions：告别PPT式切换，网页也能丝滑顺畅

发表回复取消回复

CSS View Transitions：告别PPT式切换，网页也能丝滑顺畅

发表回复 取消回复

发表回复取消回复