View Transitions API

September 2, 2023

View Transitions API

调用 document.startViewTransition(callback) 使得 DOM 变动时，浏览器生成如下伪元素结构
（注：DOM 变动可以是 Add/removing elements, changing class names, changing styles…）

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

其中， root 是元素 CSS 属性 view-transition-name 的默认值

简单来说，对于每组 view-transition-name， view transition 捕获其变动前和变动后的 DOM 结构
（注：与 DOM 元素本身无关，仅与 view-transition-name 指定的名称有关）
然后将 ::view-transition-old 过渡到 ::view-transition-new
（注：view-transition-name 在渲染前后的 DOM 中必须唯一）

::view-transition-old(root) 捕获了旧视图， ::view-transition-new(root) 捕获了新视图（的实时表示）
它们都被渲染为 CSS 的可替换元素（replaced elements）（就像 <img />）
注意，对于旧视图和新视图，仅当其实际存在时，对应伪元素才存在
（注：使用 :only-child伪类可选中此情况）但 ::view-transition-image-pair 及其上层伪元素总是存在的

使用参考：
https://developer.chrome.com/docs/web-platform/view-transitions/#api-reference
https://developer.chrome.com/blog/view-transitions-case-studies/
Debug 参考：
使用 DevTools 的动画面板即可，演示：https://http203-playlist.netlify.app/

chromium 默认样式如下

css

html::view-transition {
    position: fixed;
    inset: 0px;
}

html::view-transition-group(root) {
    right: 0px;
    bottom: 0px;
}
html::view-transition-group() {
    position: absolute;
    top: 0px;
    left: 0px;
    animation-duration: 0.25s;
    animation-fill-mode: both;
}

html::view-transition-image-pair(root) {
    isolation: isolate;
}
html::view-transition-image-pair() {
    animation-duration: inherit;
    animation-fill-mode: inherit;
}
::view-transition-image-pair() {
    position: absolute;
    inset: 0px;
}

html::view-transition-old(root) {
    mix-blend-mode: plus-lighter;
}
html::view-transition-old() {
    animation-name: -ua-view-transition-fade-out;
    animation-duration: inherit;
    animation-fill-mode: inherit;
}
::view-transition-old() {
    position: absolute;
    inset-block-start: 0px;
    inline-size: 100%;
    block-size: auto;
}

html::view-transition-new(root) {
    mix-blend-mode: plus-lighter;
}
html::view-transition-new() {
    animation-name: -ua-view-transition-fade-in;
    animation-duration: inherit;
    animation-fill-mode: inherit;
}
::view-transition-new() {
    position: absolute;
    inset-block-start: 0px;
    inline-size: 100%;
    block-size: auto;
}

默认是一个 cross-fade 的过渡动画，旧视图 opacity 从 1 到 0，新视图 opacity 从 0 到 1
旧视图和新视图具有 mix-blend-box: plus-lighter
::view-transition-image-pair 具有 isolation: isolate
这些样式都是为了能够正确实现 cross-fade 效果，但是我们的自定义过渡动画可能需要覆写它们

使用参考

使用时，只需考虑旧视图的哪个元素要过渡到新视图的哪个元素（可以是同一个元素，也可以不同）
然后给它们加上相同的 view-transition-name 名称即可（必须保证前后视图只能存在唯一同名 view-transition-name 元素）

一般来说， document.startViewTransition 传入的回调修改 DOM 即可，网络请求应在此之前发生
要使用 Javascript 控制动画，参见：https://developer.chrome.com/docs/web-platform/view-transitions/#animating-with-javascript

// TODO: 目前 typescript5.4dev 还没有提供定义，可以参考如下：
interface Document {
    /**
     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/startViewTransition)
     * @param callback A callback function typically invoked to update the DOM during the view transition process, which returns a Promise. The callback is invoked once the API has taken a screenshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.
     * @returns A ViewTransition object instance.
     */
    startViewTransition(callback: () => Promise<void> | void): ViewTransition;
}

interface ViewTransition {
    /**
     * A Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.
     */
    finished: Promise<void>;
    /**
     * A Promise that fulfills once the pseudo-element tree is created and the transition animation is about to start.
     */
    ready: Promise<void>;
    /**
     * A Promise that fulfills when the promise returned by the document.startViewTransition()'s callback fulfills.
     */
    updateCallbackDone: Promise<void>;
    /**
     * Skips the animation part of the view transition, but doesn't skip running the document.startViewTransition() callback that updates the DOM.
     */
    skipTransition(): void;
}

←Back to home