【CSS Modules】::view-transition疑似要素の使い方

::view-transitionオブジェクトは、Webページ上でのスムーズな画面遷移を実現するために使用される特別なオブジェクトです。この機能は、特にシングルページアプリケーション（SPA）などで、ユーザーが異なるビュー（画面やコンテンツの状態）を切り替える際に、視覚的な不連続性を解消し、より自然で滑らかなアニメーションを提供することを目的としています。

具体的には、JavaScriptの document.startViewTransition() メソッドが呼び出された際に、ブラウザが自動的に生成する一時的な表示領域を指します。この領域は、遷移開始時の古いコンテンツの表示と、遷移終了後の新しいコンテンツの表示を一時的に保持し、これらに対してCSSで定義されたアニメーションを適用できるようにするためのコンテナとして機能します。

開発者は、この ::view-transition およびその内部に含まれる複数の擬似要素に対してCSSのプロパティやアニメーションを設定することで、要素のフェードイン・フェードアウト、移動、拡大・縮小といった様々な効果を実装できます。これにより、ユーザーはコンテンツの切り替わりをスムーズに体験でき、アプリケーションの応答性が向上したかのように感じられます。::view-transition は、現代のWebサイトやアプリケーションにおいて、リッチなユーザーエクスペリエンスを提供するための重要な技術です。

Copy
1::view-transition {
2  animation-duration: 300ms;
3  animation-timing-function: ease-out;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません