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 |
| CSS View Transitions Module Level 2 # dom-document-startviewtransition |
ブラウザーの互換性
Loading…