invalid-view-transition-variant

This rule reports a state or container variant, such as hover:, in a style.viewTransition() definition. The snapshots are images of the page, not the element itself, so they cannot be hovered. Only media and supports-* variants can condition a snapshot style.

Reported

const transition = style.viewTransition({ old: "hover:opacity-0" });invalid-view-transition-variant: view transition utilities accept only media and supports condition variants
style(transition.for("card"));

Fixed

declare const hovered: boolean;
const fade = style.viewTransition({ old: "opacity-0" });
const keep = style.viewTransition({ old: "opacity-100" });
style((hovered ? fade : keep).for("card"));

How to fix

• To use a different transition depending on the state of the element, define one transition for each case and choose between them in JavaScript before the update, as in the example.
• To use a different transition for a media condition, such as reduced motion, keep the variant: old: "motion-reduce:duration-0".

See View transitions.

Rule settings