View Transition API - 实现HTML视图的过渡动画

无需使用CSS精确指定动效”元素“、实现MPA跳转页面动效

前端 HTML CSS

2024/9/20

2分钟阅读

触发视图动效的方法&时机：

对于SPA，将更新DOM的方法updateDomTrigger作为参数传递给document.startViewTransition(updateDomTrigger)方法，浏览器会先截取当前页面DOM元素的快照（声明了 view-transition-name CSS属性的DOM元素，默认是:root），再执行updateDomTrigger方法，然后再执行过渡动效。
对于MPA，添加以下CSS规则，过渡效果会在导航到下一个同源页面的时候自动触发。
```
@view-transition {
  navigaion: auto;
}
```

默认的过渡效果是交叉淡化：

旧视图快照opacity从1 到 0，新视图快照opacity从0 到 1。

如何自定义动效：

HTML会针对视图动效生成以下伪元素树：

::view-transition
└─ ::view-transition-group(root)
  └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

可以通过在多个 DOM 元素上设置不同的 view-transition-name CSS属性，对不同的元素使用不同的自定义动效。因此，每一个 view-transition-name都对应一个view-transition-group（默认是root）
view-transition-old指向动效前元素的静态快照
view-transition-new指向动效后元素的实时快照

具体的动画效果由CSS animation设置：


/* 只需要添加以下@view-transition规则，就会在切换页面时，触发默认的“淡化”动效 */
@view-transition {
    navigation: auto;
}

/* 自定义默认的动画行为 */
::view-transition-group(root) {
    animation-duration: 0.5s;
}

/* 创建自定义动画 */
@keyframes move-out {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes move-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

/* 将自定义动画应用到新旧元素 */
::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;

}
::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
}

用JavaScript控制动效：

对于SPA，document.startViewTransition() 方法会返回一个 ViewTransition 对象实例，这个实例包含多个 promise：

ViewTransition.ready 在创建伪元素树且动画即将开始时执行。
ViewTransition.finished 在动画完成后、且新的页面视图对用户可见且具有交互性时执行。

对于MPA：

旧页面在即将unload之前，会触发pageswap 事件，事件的event对象上的PageSwapEvent.viewTransition 属性包含了 ViewTransition 实例， PageSwapEvent.activation 包含当前切换页面的导航类型、当前文档和目标文档历史记录。
新页面初次渲染时，会触发pagereveal 事件，事件的event对象上的PageSwapEvent.viewTransition 属性包含了 ViewTransition 实例。
要注意的是，为了确保处理pagereveal 事件的script脚本在渲染动效之前执行，需要给脚本添加 blocking=“render” 属性；
另外，为了确保动效执行之前，元素是可视的，需要添加标签<link rel="expect" href="#lead-content" blocking="render" />，其中#lead-content指向对应元素。