startViewTransition 动画过渡

网页动画效果原理、案例与兼容性

最新推荐文章于 2025-10-16 16:27:43 发布

原创

最新推荐文章于 2025-10-16 16:27:43 发布 · 1.3k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css3

我们先看俩组网页动画效果：

在这里插入图片描述

一、原理

第一个：重排布局效果，类似app的重排布局效果
第二个：切换主题特效，很多第三方组件库都用到了这个特效切换主题

效果核心用到了浏览器的一个新特性startViewTransition，基本原理如下：

触发条件：当调用 document.startViewTransition() 时，浏览器会识别出即将发生的DOM变化，并准备一个视图过渡。
捕获快照：浏览器会在当前渲染帧结束时自动捕捉页面的一个快照（旧视图）。这包括页面上的所有可见元素及其样式和布局信息。
执行回调函数：startViewTransition 接受一个回调函数作为参数，在这个回调中你可以更新DOM，比如改变类名、添加或移除元素、修改属性等。这些改动代表了新视图的状态。
生成新快照：一旦回调函数完成并且新的DOM状态被提交给浏览器，浏览器会再次捕捉页面的新快照（新视图）。
应用过渡效果：浏览器使用这两个快照来计算从旧视图到新视图之间的差异，并根据这些差异自动应用合适的动画效果。默认情况下，浏览器会选择一种适当的动画方式来确保过渡看起来自然流畅。
完成过渡：当过渡完成后，旧视图被完全替换为新视图，且浏览器恢复正常的渲染流程。此时，Promise 返回，表示过渡已经结束。
伪元素控制：在整个过程中，可以利用 ::view-transition-old(root) 和 ::view-transition-new(root) 这两个特殊的CSS伪元素来定义旧视图和新视图的具体样式，包括它们如何混合、层叠顺序等。
性能优化：由于视图过渡是在浏览器层面处理的，因此它们通常比手动编写的JavaScript动画更高效，并且能够更好地与硬件加速相结合，从而提供更流畅的用户体验。
兼容性注意：需要注意的是，View Transition API 是一个相对较新的特性，不是所有的浏览器都支持它。因此，在实际项目中使用时，请务必检查目标用户的浏览器支持情况。

二、案例

特效一：核心是 view-transition-name: var(--index)，给一个不同的值，单独控制其过渡动画

.container {
   
   
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--bg-color);
  header {
   
   
    width: 100vh;
    height: 100px;
    margin-bottom: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--color);
  }
  section {
   
   
    width: 500px;
    --count: 3;
    display: flex;
    flex-wrap: wrap;
    .item {
   
   
      width: 150px;
      height: 50px;
      border-radius: 3px;
      box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.3);
      margin: 10px calc((100% - var(--count) * 150px) / var(--count) / 2);
      background-color: #6d3fe3;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
      color: var(--color);
      cursor</