Giters

dielduarte / animate-css-styled-components

simple port of animate css for styled-components

Home Page:https://dielduarte.github.io/animate-css-styled-components/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Re-animate on component update

marharyta opened this issue · comments

commented

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?

commented

hey @marharyta !

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

commented

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!