::view-transition-new
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
::view-transition-new
は CSS の擬似要素で、ビュー遷移の「新しい」ビュー状態を表します。これは新しいビューのライブ表現で、トランジションの後を表します。
ビュー遷移の間、 ::view-transition-new
はビュー遷移のプロセスで説明されているように、関連する擬似要素ツリーに記載されます。これは ::view-transition-image-pair
の子要素でしかなく、子要素を持つことはありません。
これは置換要素であり、 object-fit
や object-position
などのプロパティで操作できます。コンテンツのサイズに等しい自然な寸法を持ちます。
UA スタイルシートでは以下の既定値が指定されています。
@keyframes -ua-view-transition-fade-in {
from {
opacity: 0;
}
}
html::view-transition-new(*) {
position: absolute;
inset-block-start: 0;
inline-size: 100%;
block-size: auto;
animation-name: -ua-view-transition-fade-in;
animation-duration: inherit;
animation-fill-mode: inherit;
}
メモ: ::view-transition-new
のアニメーションを設定するために、追加のビュー遷移スタイルシートスタイルも設定されます。これらはビュー遷移中に動的に生成されます。詳細は仕様書の setup transition pseudo-elements および update pseudo-element styles の節を参照してください。
構文
::view-transition-new(<pt-name-selector>) {
/* ... */
}
<pt-name-selector>
は以下の値のうちのいずれかです。
*
-
擬似要素が、すべてのビュー遷移グループに一致するようにします。
root
-
擬似要素が、ページ全体のビュー遷移を含むためにユーザエージェントによって作成された既定の
root
ビュー遷移グループに一致するようにします。すなわち、view-transition-name
プロパティによって自分自身を固有のビュー遷移グループに割り当てていない要素を意味します)。 <custom-ident>
-
擬似要素が、指定された
<custom-ident>
をview-transition-name
プロパティを通して要素に割り当てることによって作成された固有のビュー遷移グループに一致するようにします。
例
figcaption {
view-transition-name: figure-caption;
}
@keyframes grow-x {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes shrink-x {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
height: auto;
right: 0;
left: auto;
transform-origin: right center;
}
::view-transition-old(figure-caption) {
animation: 0.25s linear both shrink-x;
}
::view-transition-new(figure-caption) {
animation: 0.25s 0.25s linear both grow-x;
}
仕様書
Specification |
---|
CSS View Transitions Module Level 1 # ::view-transition-new |
ブラウザーの互換性
BCD tables only load in the browser