Support for style objects in AnimateKeyframes

[stroborobo]

Is your feature request related to a problem? Please describe. The API to define styles is different in AnimateKeyframes compared to Animate. While Animate supports an object with key/value as styles, AnimateKeyframes only seems to support a string, making it harder to compute and manipulate.

Describe the solution you'd like It would be nice if AnimateKeyframes would support the style object, too.

Perhaps keyframes could look like this:

[
  {at: 0,   style: { opacity: 0 }},
  {at: 100, style: { opacity: 1 }},
]

Additional context Putting the animation index (%) into a property instead of being the object key itself would help interoperability from other languages that compile to JS, but aren't as dynamic.

[bluebill1049]

hi @stroborobo,

I can definitely support object syntax which aligns with <Animate />.

for at: 0, you can use Object.entity to get the key and value.

[bluebill1049]

hey @pangpang1987,

Did you have the capacity to convert object into a string for AnimateKeyFrames?

basically, support

<AnimateKeyframes 
    play 
    delay={1}
    duration={10}
    iterationCount={3}
    direction="alternative"
    keyframes={[
      {transform: 'translateY(0)'},
      {transform: 'translateY(10px)'},
    ]} 
  >

currently, we support only string:

<AnimateKeyframes 
    play 
    delay={1}
    duration={10}
    iterationCount={3}
    direction="alternative"
    keyframes={[
      'transform: translateY(0)',
      'transform: translateY(10px)',
    ]} 
  >

[stroborobo]

@bluebill1049

for at: 0, you can use Object.entity to get the key and value

Object.entries? Absolutely, at was a brain fart anyway, I could just use maps or tuple lists instead m( But thanks for considering the main part of this request :)

[bluebill1049]

haha no worries @stroborobo , either @pangpang1987 or I will work on that feature.

[pangpang1987]

@bluebill1049 I can work on this. Keep the styles object.

[bluebill1049]

thanks, heaps @pangpang1987 legend.

[pangpang1987]

thanks, heaps @pangpang1987 legend.

Do you want to reimplement the two step senerario to use from to? Or keep the existing one?

[bluebill1049]

i think it's better to support both, then it's not a breaking change @pangpang1987

[bluebill1049]

@pangpang1987 I have tested the feature branch works great 👍

however this is not workingkeyframes={[{ 0: {opacity: 0}}, {100: {opacity: 1}}]}

I will publish what you got with a minor update first, we can patch in the next release

[bluebill1049]

https://github.com/bluebill1049/react-simple-animate/releases/tag/3.3.0

[bluebill1049]

Looks like the above use is low. Going to close it for now