Jss: function values doenst work with keyframes

[xiaofan2406]

'@keyframes move': {
    '0%': {
      transform: 'translateX(0)'
    },
    '100%': {
      transform: ({size}) => `translateX(${size}px)`
    }
  }

Doesn't seem to work.

In addition, when this didn't work in my React Component, it messed up other classes injection as well.

[kof]

Lets see.

[kof]

Btw. I am not sure one should do this anyways. keyframes should be actually static.

[kof]

You can basically do the same using transform directly, without keyframes.

[xiaofan2406]

I simplified the code when posting the issue.

The keyframe actually does not change, because my props wont change. But it is important for it to be initially calculated from props

[kof]

I see!

[octalmage]

I'm running into this as well. I have a BarChart in a table, and I'd love for it to animate from 0 width to it's actual width (based on the value) on load. After that the transition takes over.

Thanks for the killer library.

[kof]

Will be fixed soon.

[kof]

Fixed and released in 7.1.2

[octalmage]

Woohoo thank you!

[xiaofan2406]

Thanks for fixing the bug 👍