【W3学习】CSS View Transitions Module Level 1（CSS 视图转换模块）

该模块定义了视图转换 API，以及相关的属性和伪元素。

html {
  page-transition-tag: root;
}

html::page-transition {
  position: fixed;
  inset: 0;
}

html::page-transition-container(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

html::page-transition-image-wrapper(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}

html::page-transition-outgoing-image(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}

如果页面过渡的默认动画是可以接受的，那么启动过渡只需要在页面的 CSS 中设置 page-transition-tag 和一行脚本即可启动它：

document.createTransition({
    updateDOM() {
        coolFramework.changeTheDOMToPageB();
    }
});

如果需要更精确的管理，可以在脚本中管理过渡元素：

async function doTransition() {
    // Specify "outgoing" elements. The tag is used to match against
    // "incoming" elements they should transition to, and to refer to
    // the transitioning pseudo-element.
    document.querySelector('.old-message').style.pageTransitionTag = 'message';

    const transition = document.createTransition({
        async updateDOM() {
            // This callback is invoked by the browser when "outgoing"
            // capture finishes and the DOM can be switched to the new
            // state. No frames are rendered until this callback returns.

            // DOM changes may be asynchronous
            await coolFramework.changeTheDOMToPageB();

            // Tagging elements during the updateDOM() callback marks them as
            // "incoming", to be matched up with the same-tagged "outgoing"
            // elements marked previously and transitioned between.
            document.querySelector('.new-message').style.pageTransitionTag =
                'message';
        },
    });

    // When ready resolves, all pseudo-elements for this transition have
    // been generated.
    // They can now be accessed in script to set up custom animations.
    await transition.ready;

    document.documentElement.animate(keyframes, {
        ...animationOptions,
        pseudoElement: '::page-transition-container(message)',
    });

    // When the finished promise resolves, that means the transition is
    // finished.
    await transition.finished;
}