CSSViewTransitionRule

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

もっと詳しく
完全な互換性情報を見る

CSSViewTransitionRule インターフェイスは、CSS の @view-transition アットルールを表します。

インスタンスプロパティ

祖先である CSSRule から継承したプロパティがあります。

navigation 読取専用: @view-transition アットルールの navigation 記述子の値を返します。
types 読取専用: @view-transition アットルールの types 記述子の値を格納した配列を返します。

例

基本的な使い方

このスタイルシートは @view-transition アットルールを含んでおり、navigation および types 記述子が設定されています。

css

@view-transition {
 navigation: auto;
 types: slide, rotate;
}

スクリプト内では、document.styleSheets[0].cssRules を使用して @view-transition アットルールへの参照を取得し、対応する CSSViewTransitionRule オブジェクトとその navigation および types プロパティをコンソールに出力します。types プロパティは、types 記述子に設定された値を含む配列を返します。

let myRule = document.styleSheets[0].cssRules;
console.log(myRule[0]); // CSSViewTransitionRule で、@view-transition アットルールを表す
console.log(myRule[0].navigation); // "auto"
console.log(myRule[0].types); // ["slide", "rotate"]