上のボタンで中身を切り替えると、前の画面が消えて新しい画面が少し下から現れます。document.startViewTransition() の中で中身を書き換えるだけで、ブラウザが前後の画面を撮って動かしてくれます。View Transitions に対応していないブラウザでは、演出なしで普通に切り替わります。
TRANSITION
今どきのページ切替・画面遷移の素材
ページや画面が切り替わるときの演出です。新しいブラウザの View Transitions という仕組みを使うものは、対応していないブラウザでは演出なしで普通に切り替わります。
9種類
「次へ」では左へ、「戻る」では右へすべって切り替わります。予約や申し込みの入力画面のように、順番に進む画面に向いています。向きは html に一時的に付けるクラス（cs-tr02-back）で切り替えています。View Transitions に対応していないブラウザでは、演出なしで普通に切り替わります。
一覧で押した写真が、そのまま詳細画面の大きな写真へ移動・拡大します。前と後の写真に同じ view-transition-name を付けると、ブラウザが位置と大きさをつないで動かします。別のページどうしで使うときは、両方のページに @view-transition { navigation: auto; } を入れ、一覧と詳細の写真に同じ名前を付けてください。写真の部分は色の面です。View Transitions に対応していないブラウザでは、演出なしで普通に切り替わります。
押したボタンの位置から円が広がって、明るい表示と暗い表示が入れ替わります。ダークモードの切り替えにそのまま使えます。サイト全体に使うときは、.cs-tr04 を html に置き換え、view-transition-name の代わりに root を使ってください。View Transitions に対応していないブラウザでは、演出なしで普通に切り替わります。
色の幕が上から降りてきて画面をおおい、そのあいだに中身が替わって、幕が下へ抜けていきます。View Transitions を使わないので、どのブラウザでも同じ動きになります。別のページへ移るときに使うなら、リンクを押したら幕を降ろしてから location.href で移動し、次のページの読み込み時に幕を下へ抜く動きだけを再生してください。
新しい画面が、斜めの線で左から右へ塗り替えるように現れます。施工前・施工後の写真を見比べるのに向いています。写真の部分は色の面です。View Transitions に対応していないブラウザでは、演出なしで普通に切り替わります。
ページを読み込んだときに、中身が上から順に少しずつ現れます。CSSだけで動きます。順番は animation-delay の秒数で変えられます。もう一度見るには、見本の「最初から」を押してください。
本番では CSSだけ で動きます。CSSを 移動元と移動先の両方のページ に入れると、同じサイト内のリンクで移ったときに、前のページが少し上へ消え、次のページが下から現れます（@view-transition { navigation: auto; }）。対応していないブラウザでは普通のページ移動になります。JSと .cs-tr08 の見た目は、この見本で1ページの中で移動のふりをするためのものなので、本番では不要です。
本番では CSSだけ で動きます。ヘッダーと中身に別々の view-transition-name を付けると、ページを移ってもヘッダーは動かず、中身だけが横にすべって入れ替わります。CSSを全ページに入れ、ヘッダーと中身の要素にそれぞれ cs-tr09__head cs-tr09__main のクラスを付けてください（名前は1ページに1つだけ）。JSは見本で移動のふりをするためのもので、本番では不要です。