Document: startViewTransition() メソッド

Limited availability

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

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

startViewTransition() はビュートランジション API のメソッドで、新しいビュートランジションを始め、それを表す ViewTransition オブジェクトを返します。

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

構文

js
startViewTransition(callback)

引数

callback

通常、ビュートランジションプロセス中に 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

関連情報