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

::view-transition-new()クラスは、Webページ上でスムーズなビジュアルトランジションを実現するView Transitions APIの一部として導入されたCSS擬似要素を表すクラスです。この擬似要素は、ページコンテンツが変更される際に、トランジション後の新しいビューの状態を示すスナップショットを表現するために使用されます。具体的には、画面上の要素が新しい状態に遷移する際、その「新しい」側の視覚的な表現を担当します。

開発者はこの::view-transition-new()擬似要素に対してCSSスタイルを適用することで、新しいコンテンツが画面に表示される際の見た目を詳細に制御できます。例えば、フェードインやスライドインといったアニメーション、不透明度の調整、スケールの変更など、多様な視覚的効果をカスタマイズすることが可能です。これにより、ユーザーはより洗練された、途切れのないページ遷移体験を得ることができます。

この擬似要素は::view-transition-old()擬似要素と対になって機能し、それぞれトランジション前（古いビュー）とトランジション後（新しいビュー）の視覚的なスナップショットを表現します。通常、::view-transition-image-pair()擬似要素の子孫として配置され、トランジション中に表示される画像のペアの一部として機能します。システムエンジニアを目指す初心者の方々にとって、View Transitions APIとこの::view-transition-new()擬似要素を理解することは、モダンなWebアプリケーションにおいてユーザーインターフェースの動的な魅力を高めるための重要なステップとなるでしょう。この機能は、コンテンツの切り替え時に発生する視覚的な不連続性を滑らかに繋ぎ、より直感的で楽しいWeb体験を提供するために不可欠です。

Copy
1::view-transition-new() {
2  /* スタイルをここに記述します */
3  opacity: 1;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません