CSSViewTransitionRule

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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