In my current setup, I have been utilizing css transitions triggered by property updates to manage animations within my react components and everything has been functioning smoothly up until now.
However, I am encountering an issue where I only want to transition a specific set of css properties on one particular component. I attempted to achieve this by setting the 'transitionProperty' css attribute, but for some reason, React is not recognizing or applying this setting!
Here is an example of the code:
<div style={{
color: 'red',
background-color: 'green',
transition: 'all 1s ease-out',
transitionProperty: 'color, background-color'
}} />
The output I receive is:
<div style="color:red; background-color:green; transition:all 1s ease-out" />
No 'transition-property' is being included!
I am using ReactJS with a Webpack build stack, and I have already attempted adding prefixes like {WebkitTransitionProperty:
What could be causing this issue?