CSSViewTransitionRule

インスタンスプロパティ

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

navigation 読取専用

@view-transition アットルールの navigation 記述子の値を返します。

types 読取専用

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

インスタンスメソッド

祖先である CSSRule から継承したメソッドがあります。

例

基本的な使い方

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

@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"]

仕様書

ブラウザーの互換性

関連情報

• @view-transition
• ビュー遷移 API