backgroundColor "transparent" transition problem

[magdalko]

🐛 Bug Report

hello, I have a set of buttons which change the background color when hovering or clicking. I found something weird when it comes to transparent background color. It turns it first to grey color and then changing to the demanded color (in this case blue).

To Reproduce

Here is an example in codesandbox, where you can see the problem (it is set to transparent now, but change backgroundColor to white where it says transparent in index.js to see the difference): https://codesandbox.io/s/react-spring-hover-forked-w76pw?file=/src/index.js

Described in here as well (with videos): #1623

Environment

• react-spring v9.2.3

[joshuaellis]

you've named the api return value as set are you trying to animate from transparent to blue? Because the color will interpolate to that. And the CSS for transparent is probably 0,0,0, it sounds like you'd be better off using an opacity and a div behind that button for what you'd prefer. Would that work?

[magdalko]

Actually, now when you said it, it turned out to work when changing the "transparent" to "rgba(255,255,255,0)" so the white with opacity 0. I guess it would be better to start with the target color with opacity 0, but this worked fine for us. This way we do not need to add any more div. Thanks for guidance! @joshuaellis