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 インターフェイスのメソッドで、新しい同一文書内 (SPA) のビュー遷移を始め、それを表す ViewTransition オブジェクトを返します。
startViewTransition() を呼び出すと、ビュー遷移のプロセスで説明されている一連の手順が続きます。
構文
startViewTransition()
startViewTransition(updateCallback)
startViewTransition(options)
引数
updateCallback省略可-
通常、SPA のビュー遷移処理中に DOM を更新するために呼び出されるオプションのコールバック関数で、プロミス (
Promise) を返します。このコールバックは、 API が現在のページのスナップショットを取得したときに呼び出されます。コールバックが返すプロミスが履行されると、次のフレームでビュー遷移が始まります。コールバックが返すプロミスが拒否された場合、トランジションは放棄されます。 options省略可-
このビュー遷移を構成するためのオプションを含むオブジェクトです。以下のプロパティを置くことができます。
update省略可-
前述の
updateCallback関数と同じものです。デフォルトはnullです。 types省略可-
ビュー遷移に適用される型を表す文字列の配列です。ビュー遷移型を使用すると、発生する遷移の種類に基づいて、CSS スタイルや JavaScript ロジックを選択的に適用することができます。デフォルトは空の配列です。
返値
ViewTransition のオブジェクトインスタンスです。
例
完全な例のリストについては、ビュー遷移 API > 例を参照してください。
基本的な使い方
この同一文書内でのビュー遷移では、ブラウザーがビュー遷移に対応しているかどうかを確認します。
未対応の場合、代替手段を用いて背景色を設定し、即座に適用します。
対応している場合は、CSSで定義したアニメーションルールと共に、安全に document.startViewTransition() を呼び出すことができます。
<main>
<section></section>
<button id="change-color">色を変更</button>
</main>
::view-transition-group を使用して、animation-duration を 2 秒に設定します。
html {
--bg: indigo;
}
main {
display: flex;
flex-direction: column;
gap: 5px;
}
section {
background-color: var(--bg);
height: 60px;
border-radius: 5px;
}
::view-transition-group(root) {
animation-duration: 2s;
}
const colors = ["darkred", "darkslateblue", "darkgreen"];
const colBlock = document.querySelector("section");
let count = 0;
const updateColor = () => {
colBlock.style = `--bg: ${colors[count]}`;
count = count !== colors.length - 1 ? ++count : 0;
};
const changeColor = () => {
// ビュー遷移に対応していないブラウザー向けの代替処理
if (!document.startViewTransition) {
updateColor();
return;
}
// ビュー遷移を使用する場合
const transition = document.startViewTransition(() => {
updateColor();
});
};
const changeColorButton = document.querySelector("#change-color");
changeColorButton.addEventListener("click", changeColor);
changeColorButton.addEventListener("keypress", changeColor);
ビュー遷移に対応している場合、ボタンをクリックすると、2 秒かけて色が徐々に変化します。 対応していない場合は、アニメーションなしで、代替方法を用いて背景色が設定されます。
仕様書
| Specification |
|---|
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |
| CSS View Transitions Module Level 2 # dom-document-startviewtransition |