Document: startViewTransition() メソッド
Baseline
2025
*
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
startViewTransition() は Document インターフェイスのメソッドで、新しいビュー遷移を始め、それを表す ViewTransition オブジェクトを返します。
startViewTransition() を呼び出すと、ビュー遷移のプロセスで説明されている一連の手順が続きます。
構文
startViewTransition()
startViewTransition(updateCallback)
引数
updateCallback省略可-
通常、ビュー遷移プロセス中に DOM を更新するために呼び出されるオプションのコールバック関数で、プロミス (
Promise) を返します。コールバックは、 API が現在のページのスクリーンショットを導いたら呼び出されます。コールバックが返すプロミスが履行されると、次のフレームでビュー遷移が始まります。コールバックが返すプロミスが拒否された場合、トランジションは放棄されます。
返値
ViewTransition のオブジェクトインスタンスです。
例
基本的な使用方法
基本的なビュー遷移のデモでは、 updateView() 関数はビュー遷移 API に対応しているブラウザーと対応していないブラウザーの両方に対応しています。対応しているブラウザーで、返値を気にせずにビュー遷移のプロセスを設定するには startViewTransition() を呼び出します。
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…