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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
startViewTransition

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報