search

dielduarte / animate-css-styled-components

simple port of animate css for styled-components
https://dielduarte.github.io/animate-css-styled-components/
190 stars 8 forks source link

Re-animate on component update #11

Closed marharyta closed 6 years ago

marharyta commented 6 years ago

Hey, @dielduarte ! This library is incredible! Is there a way to re-animate the component when the component is re-rendered? I have a list of map markers that I want to re-animate every time we change the markers on a page. See the example.

https://codesandbox.io/s/1vjm67ny87 Here I have them animated every time the page is reloaded, yet how to reload them every time the component is re-mounted? Such as in search where the component appear and disappear depending on a search output?

dielduarte commented 6 years ago

hey @marharyta !

First, thanks for opening a PR, I will take a look in your example and come back for you ASAP!

dielduarte commented 6 years ago

hey @marharyta !!

I did a small example using your code as the base, that already works as you think!

Look: https://codesandbox.io/s/mo2w6x7p4y

What happened in your example, indeed the pins won't be updated because you use the key prop with a fixed value, because of that React with your diff algorithm know which components really need a rerender.

Look my example, I pass a dynamic key and force an update after 3 seconds to add a new location and then all pins are animated again like you look for! :)

I hope that this can help you, I'll close this issue but feel free to opening again.

Thanks!