digital-flowers / react-animated-css

React component to show or hide elements with animations
https://digital-flowers.github.io/react-animated-css.html
232 stars 36 forks source link

How to use it with react router #15

Closed mrsaeeddev closed 5 years ago

mrsaeeddev commented 5 years ago

There's an issue with me using react-animated-css with react-router. I am currently wrapping Components with like this: `

            </Animated>` 

It works fine when I am using it with components not defined on explicit routes but when I am using It on components while changing routes the animations don't work on init. However when I reload the same component the animation works on init.

digital-flowers commented 5 years ago

If I understand what you are trying to do, I think the <Animated/> component need to be inside the route (in the render of SomeComponent)

mrsaeeddev commented 5 years ago

I am doing the same like you suggested...its working fine on components with out routing but on components who have separate routes defined for them, Animations don't work on them in the same way i.e wrapping top div of my someComponent with Animated Component..I guess i needs to be done in some lifecycle events in React but I cannot exactly figure out how to do that..

digital-flowers commented 5 years ago

if you can share some code example