How to make radix components ignore transitions

[fescherer]

Hello everyone, I am not sure if the problem I am facing it's related to radix, but I only saw this problem when using radix components.

So I am using NextJS with styled components, and I want a smooth transition when theme has changed. I achieved this by giving the follow on global styles:

* {
    transition: all 0.2s linear;
  }

But this transition is making radix components moving through the browser's window. I made a gif to demonstrate

How can I fix this? I just need the transition for styled components theme change, if maybe there are a workaround for this, I don't mind changing.

Thanks

[andy-hook]

@ofelipescherer this is because you're targeting all possible transition-able properties (including Radix positioning transforms), if you want to keep the effect you should target only the values modified by your theme (commonly color and background-color).

Personally speaking I would avoid this effect entirely, from experience you're going to run into problems where even the above properties will transition unexpectedly, you'll also incur performance costs and tastefully speaking an instant flip just feels better imo.

Hope this helps

[fescherer]

Thank you, I think I will give just a background-color transition. My application is not very big, so I think performance won't be an issue