CSS `View Transitions API` (视图过渡API) (提案)：平滑页面切换动画 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！我是今天的主讲人，大家都叫我“代码老司机”。今天咱们不飙车，聊点轻松愉快的——CSS View Transitions API，一个能让你的网页切换动画丝滑柔顺的秘密武器。

这东西呢，简单来说，就是能让你在单页应用（SPA）或者多页应用（MPA）里，实现页面元素之间的平滑过渡效果，就像变魔术一样，让用户感觉界面切换不再是生硬的闪现，而是优雅的变形。

一、啥是View Transitions API？（别被名字吓跑，其实很简单）

View Transitions API 是一套全新的 CSS 和 JavaScript API，它允许开发者创建声明式的、跨文档的视图过渡效果。这意味着，你可以用简洁的代码，控制页面元素在不同视图（页面）之间的动画，让切换过程更加自然流畅。

想想以前，搞页面切换动画是不是要写一大堆 JavaScript，各种监听、计算、手动控制元素位置和动画属性？现在好了，有了 View Transitions API，大部分工作都交给浏览器去做了，你只需要告诉它“哪些元素要过渡”、“过渡效果是什么样的”就行了。

二、为啥要用它？（因为它能让你的用户更爽）

提升用户体验： 页面切换不再是生硬的闪烁，而是平滑的动画，用户感觉更舒服，更愿意留在你的网站上。
增强品牌形象： 精美的过渡效果能让你的网站看起来更专业、更精致，提升品牌价值。
减少认知负荷： 平滑的过渡动画能帮助用户理解页面之间的关系，减少认知负担，让他们更容易找到自己需要的信息。
简化开发流程： 告别复杂的 JavaScript 动画代码，用更简洁的 API 实现更强大的效果。

三、怎么用？（手把手教你玩转View Transitions API）

View Transitions API 主要涉及两个部分：

JavaScript API： 用于启动视图过渡。
CSS API： 用于控制过渡动画的样式。

3.1 JavaScript 部分：启动过渡

核心函数是 document.startViewTransition()。这个函数接收一个回调函数作为参数，这个回调函数负责更新 DOM。

// 假设点击了一个链接，需要切换到另一个页面
document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault(); // 阻止默认的链接跳转行为

  // 启动视图过渡
  document.startViewTransition(() => {
    // 在这个回调函数里更新 DOM，比如加载新页面内容
    // 也可以使用 fetch API 获取数据后更新
    fetch('/new-page.html')
      .then(response => response.text())
      .then(html => {
        document.body.innerHTML = html;
      });
  });
});

这段代码做了什么呢？

监听了链接的点击事件。
阻止了默认的链接跳转行为，防止页面刷新。
调用 document.startViewTransition() 启动视图过渡。
在回调函数里，使用 fetch API 加载新页面的内容，然后更新 document.body.innerHTML。

注意： 必须在 document.startViewTransition() 的回调函数里更新 DOM，这样浏览器才能正确捕获过渡前后的状态。

3.2 CSS 部分：控制动画样式

View Transitions API 会自动为过渡期间的元素添加一些特殊的 CSS 伪类和伪元素，你可以利用这些伪类和伪元素来控制动画的样式。

::view-transition：根伪元素，包含了整个过渡过程。
::view-transition-group(root)：代表整个页面的过渡组。root 是默认的，也可以自定义组名。
::view-transition-image-pair(root)：包含过渡前后的图片对。
::view-transition-new(root)：过渡后的新元素。
::view-transition-old(root)：过渡前的旧元素。

你可以使用这些伪元素来定义动画效果，比如透明度、缩放、位移等等。

/* 整个过渡过程的样式 */
::view-transition {
  contain: strict; /* 限制过渡效果的影响范围 */
}

/* 整个页面的过渡组 */
::view-transition-group(root) {
  animation: to-top 0.5s ease-out; /* 从底部滑入 */
}

/* 过渡后的新元素 */
::view-transition-new(root) {
  mix-blend-mode: normal; /* 设置混合模式 */
}

/* 过渡前的旧元素 */
::view-transition-old(root) {
  mix-blend-mode: normal; /* 设置混合模式 */
}

/* 从底部滑入的动画 */
@keyframes to-top {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

这段 CSS 代码做了什么呢？

设置了 ::view-transition 的 contain: strict，限制过渡效果的影响范围，避免影响其他元素的布局。
为 ::view-transition-group(root) 添加了一个 to-top 动画，让整个页面从底部滑入。
设置了 ::view-transition-new(root) 和 ::view-transition-old(root) 的 mix-blend-mode 为 normal，避免混合模式带来的问题。
定义了一个 to-top 动画，从底部滑入并逐渐显示。

四、进阶技巧（让你的动画更炫酷）

4.1 自定义过渡组名

你可以为需要特殊处理的元素指定自定义的过渡组名，然后在 CSS 中针对这些组名定义不同的动画效果。

// 在更新 DOM 的时候，为需要过渡的元素添加 data-view-transition-name 属性
document.querySelector('.my-element').dataset.viewTransitionName = 'my-element';

/* 针对名为 my-element 的过渡组定义动画 */
::view-transition-group(my-element) {
  animation: fade-in 0.3s ease-in-out; /* 淡入效果 */
}

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

4.2 使用 view-transition-name 属性

view-transition-name 是一个 CSS 属性，可以用来显式地指定哪些元素需要参与过渡。如果没有指定，浏览器会自动尝试匹配过渡前后的元素。

/* 为需要过渡的元素指定 view-transition-name 属性 */
.my-element {
  view-transition-name: my-element;
}

4.3 处理图片过渡

View Transitions API 对图片过渡有很好的支持。你可以使用 ::view-transition-image-pair 伪元素来控制图片过渡的样式。

/* 图片过渡效果 */
::view-transition-image-pair(my-image) {
  object-fit: cover; /* 图片填充方式 */
}

::view-transition-new(my-image) {
  animation: zoom-in 0.5s ease-out; /* 放大效果 */
}

::view-transition-old(my-image) {
  animation: zoom-out 0.5s ease-in; /* 缩小效果 */
}

@keyframes zoom-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.5);
    opacity: 0;
  }
}

4.4 监听过渡事件

document.startViewTransition() 函数返回一个 ViewTransition 对象，你可以监听这个对象的 finished 和 skipped 事件，以便在过渡完成或跳过时执行一些操作。

const transition = document.startViewTransition(() => {
  // 更新 DOM
});

transition.finished.then(() => {
  // 过渡完成
  console.log('Transition finished');
});

transition.skipped.then(() => {
  // 过渡被跳过
  console.log('Transition skipped');
});

五、兼容性问题（别高兴太早，有些浏览器还不支持）

View Transitions API 还是一个比较新的 API，兼容性还不是很好。目前，Chrome 和 Edge 已经支持，Firefox 正在积极开发中，Safari 的支持情况未知。

在使用 View Transitions API 之前，最好先检测浏览器是否支持：

if (document.startViewTransition) {
  // 浏览器支持 View Transitions API
  console.log('View Transitions API is supported');
} else {
  // 浏览器不支持 View Transitions API
  console.log('View Transitions API is not supported');
  // 可以使用其他方式实现过渡效果，比如传统的 JavaScript 动画
}

六、最佳实践（一些小建议）

保持动画简洁： 过渡动画应该简洁明了，避免过度花哨的效果，以免分散用户的注意力。
考虑性能： 过渡动画可能会影响页面的性能，尤其是在移动设备上。应该尽量优化动画效果，避免使用复杂的计算和大量的 DOM 操作。
提供回退方案： 对于不支持 View Transitions API 的浏览器，应该提供回退方案，比如使用传统的 JavaScript 动画或者直接切换页面。
测试不同场景： 在不同的浏览器、设备和网络环境下测试过渡动画，确保效果一致且性能良好。

七、代码示例：一个简单的页面切换动画

下面是一个简单的页面切换动画的完整示例：

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>View Transitions API Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <a href="page1.html" data-page="page1">Page 1</a>
    <a href="page2.html" data-page="page2">Page 2</a>
  </nav>
  <main id="content">
    <h1>Welcome to Page 1</h1>
    <p>This is the content of page 1.</p>
    <img src="image1.jpg" alt="Image 1" class="page-image" data-view-transition-name="page-image">
  </main>
  <script src="script.js"></script>
</body>
</html>

HTML (page1.html):

<h1>Welcome to Page 1</h1>
<p>This is the content of page 1.</p>
<img src="image1.jpg" alt="Image 1" class="page-image" data-view-transition-name="page-image">

HTML (page2.html):

<h1>Welcome to Page 2</h1>
<p>This is the content of page 2.</p>
<img src="image2.jpg" alt="Image 2" class="page-image" data-view-transition-name="page-image">

CSS (style.css):

/* 整个过渡过程的样式 */
::view-transition {
  contain: strict;
}

/* 整个页面的过渡组 */
::view-transition-group(root) {
  animation: fade-in-out 0.3s ease-in-out;
}

/* 图片过渡效果 */
::view-transition-image-pair(page-image) {
  object-fit: cover;
}

::view-transition-new(page-image) {
  animation: zoom-in 0.3s ease-out;
}

::view-transition-old(page-image) {
  animation: zoom-out 0.3s ease-in;
}

/* 图片样式 */
.page-image {
  width: 300px;
  height: 200px;
}

/* 淡入淡出动画 */
@keyframes fade-in-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 放大动画 */
@keyframes zoom-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 缩小动画 */
@keyframes zoom-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.5);
    opacity: 0;
  }
}

JavaScript (script.js):

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault();
    const page = link.dataset.page;
    const url = link.href;

    if (document.startViewTransition) {
      document.startViewTransition(() => {
        return fetch(url)
          .then(response => response.text())
          .then(html => {
            document.querySelector('#content').innerHTML = html;
          });
      });
    } else {
      // Fallback for browsers that don't support View Transitions API
      window.location.href = url;
    }
  });
});

八、 View Transitions API 总结

特性	描述
`document.startViewTransition()`	启动视图过渡的 JavaScript 函数，接收一个回调函数来更新 DOM。
`::view-transition`	根伪元素，包含了整个过渡过程。
`::view-transition-group()`	代表一个过渡组，可以自定义组名。
`::view-transition-image-pair()`	包含过渡前后的图片对。
`::view-transition-new()`	过渡后的新元素。
`::view-transition-old()`	过渡前的旧元素。
`view-transition-name`	CSS 属性，用于显式地指定哪些元素需要参与过渡。
兼容性	目前 Chrome 和 Edge 支持，Firefox 正在开发中，Safari 支持情况未知。

View Transitions API 的出现，无疑为 Web 开发带来了新的可能性。它让我们可以用更简洁的代码，实现更强大的页面切换动画效果，从而提升用户体验，增强品牌形象。虽然目前兼容性还不是很好，但相信随着时间的推移，它会越来越普及，成为 Web 开发的标配。

好了，今天的讲座就到这里。希望大家能通过今天的学习，对 View Transitions API 有更深入的了解，并在实际项目中尝试使用它，让你的网站变得更加炫酷！谢谢大家！

发表回复 取消回复

发表回复取消回复