【CSS Modules】view-transition-nameプロパティの使い方

view-transition-nameプロパティは、Webページの画面遷移時に要素をアニメーションさせるためのビュー遷移名（view transition name）を保持するプロパティです。このプロパティは、View Transitions APIと組み合わせて使用され、ユーザーが新しいページへ移動したり、既存のページ内でコンテンツが大きく更新されたりする際に、特定の要素が滑らかにアニメーションするよう設定するために用いられます。

具体的には、画面遷移の「前」のページ（または状態）にある要素と、「後」のページ（または状態）にある同じ要素に対して、このview-transition-nameプロパティに同じ一意な識別子を設定することで、ブラウザがそれらを同一の要素と認識し、自動的にアニメーションを生成します。例えば、view-transition-name: hero-image; のように値を指定します。この値は、その要素を識別するための任意の名前として機能し、一般的にはページ内で一意となるように設定することが推奨されます。

このプロパティを設定すると、ブラウザは遷移元と遷移先の要素の状態を比較し、その間の視覚的な変化を自然なアニメーションとして表現します。これにより、ユーザーはページが突然切り替わるのではなく、要素が移動したり変化したりする様子をスムーズに追うことができ、より良いユーザー体験が得られます。view-transition-name: none; と設定することで、特定の要素をビュー遷移の対象から除外することも可能です。view-transition-nameプロパティは、複雑なJavaScriptコードを書かずに、高度なアニメーション遷移を実現するための強力なツールとなります。

Copy
1.my-element {
2  view-transition-name: my-unique-name;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません