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

::view-transition-old()擬似要素は、CSSのView Transitions APIにおいて、ウェブページの画面遷移中に一時的に表示される「古いコンテンツ」のスナップショットを表すために使用されます。この擬似要素は、要素が新しい状態に遷移する際、遷移前の要素の視覚的な状態を静止画像として保持し、その古い状態に対して特別なスタイルやアニメーションを適用することを可能にします。

具体的には、ナビゲーションの切り替えや要素の追加・削除といったUIの変更時に、ユーザーが知覚する視覚的な「ジャンプ」を和らげ、滑らかで連続性のある遷移効果を提供します。開発者はこの擬似要素にCSSのプロパティ（例: opacity、transform、animationなど）を適用することで、古いコンテンツが画面からフェードアウトしたり、移動したりする際のアニメーションの挙動を詳細に制御できます。

::view-transition-old()は、単独で使用されるのではなく、::view-transition-group()や::view-transition-image-pair()といった、他のビュー遷移関連の擬似要素の子孫セレクタとして機能します。これにより、特定の遷移フェーズにおける古いビューの外観と振る舞いを精密にカスタマイズすることが可能です。この機能は、ユーザーインターフェースに洗練された動きと連続性をもたらし、ユーザーエクスペリエンスを大幅に向上させるための重要なツールとなります。

Copy
1::view-transition-group(my-transition)::view-transition-old(root) {
2  opacity: 0;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません