CSSViewTransitionRule
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The CSSViewTransitionRule interface represents a CSS @view-transition at-rule.
Instance properties
Inherits properties from its ancestor, CSSRule.
-
Returns the
@view-transitionat-rule'snavigationdescriptor value. typesRead only-
Returns an array containing the
@view-transitionat-rule'stypesdescriptor values.
Instance methods
Inherits methods from its ancestor, CSSRule.
Examples
Basic usage
A stylesheet includes a @view-transition at-rule, with navigation and types descriptors set:
@view-transition {
navigation: auto;
types: slide;
}
In script, we grab a reference to the @view-transition at-rule using document.styleSheets[0].cssRules, then log the corresponding CSSViewTransitionRule object and its navigation and types properties to the console. The types property returns an array containing the values set for the types descriptor.
let myRule = document.styleSheets[0].cssRules;
console.log(myRule[0]); // a CSSViewTransitionRule representing the @view-transition at-rule
console.log(myRule[0].navigation); // "auto"
console.log(myRule[0].types); // ["slide"]
Specifications
| Specification |
|---|
| CSS View Transitions Module Level 2 # cssviewtransitionrule |