Document: startViewTransition() メソッド

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

startViewTransition()Document インターフェイスのメソッドで、新しいビュー遷移を始め、それを表す ViewTransition オブジェクトを返します。

startViewTransition() を呼び出すと、ビュー遷移のプロセスで説明されている一連の手順が続きます。

構文

js
startViewTransition()
startViewTransition(updateCallback)

引数

updateCallback 省略可

通常、ビュー遷移プロセス中に DOM を更新するために呼び出されるオプションのコールバック関数で、プロミス (Promise) を返します。コールバックは、 API が現在のページのスクリーンショットを導いたら呼び出されます。コールバックが返すプロミスが履行されると、次のフレームでビュー遷移が始まります。コールバックが返すプロミスが拒否された場合、トランジションは放棄されます。

返値

ViewTransition のオブジェクトインスタンスです。

基本的な使用方法

基本的なビュー遷移のデモでは、 updateView() 関数はビュー遷移 API に対応しているブラウザーと対応していないブラウザーの両方に対応しています。対応しているブラウザーで、返値を気にせずにビュー遷移のプロセスを設定するには startViewTransition() を呼び出します。

js
function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

仕様書

Specification
CSS View Transitions Module Level 1
# dom-document-startviewtransition

ブラウザーの互換性

BCD tables only load in the browser

関連情報