split-view-transition-class

This rule reports view transitions that reach one element through separate style() calls, such as a base style and the call that receives it. Each call sets the whole view-transition-class list, so one list replaces the other.

Reported

const first = style.viewTransition({ old: "duration-150" });
const second = style.viewTransition({ new: "duration-150" });
const base = style(first.for("card"));
style(base, second);split-view-transition-class: view-transition-class is one property: this call's list replaces the one its composed base declares, so declare the transitions in one call

Fixed

const first = style.viewTransition({ old: "duration-150" });
const second = style.viewTransition({ new: "duration-150" });
style(first, second.for("card"));

How to fix

Pass every transition of the element to the same style() call, with one .for(), as in the example. You can still store and share the transition definitions themselves.

Rule settings