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