Open Fxlr8 opened 5 years ago
I can see that you use react-router's <Prompt>
here:
https://github.com/aholachek/react-flip-toolkit-router-example/blob/5522d1beca4c45eb5fb0ca613d8fed03bf962036/src/IconSetPage/index.js#L99-L104
https://github.com/aholachek/react-flip-toolkit-router-example/blob/5522d1beca4c45eb5fb0ca613d8fed03bf962036/src/IconSetPage/index.js#L117
What is the purpose?
Was it used to delay the unmount of the route? This does not work for me, i just get an alert window with "350" in it. Why not to use something like react-transition-group
here?
Hi, sorry for the delay in reply. You're right that I was using a somewhat hacky method to keep the route component in the dom, I think I should have used the children func instead. I will look into it more tonight and get back to you.
The main difference (which causes my problem) with your example is that you render the iconSet
page inside the same route with the cards. But in my case, the cards are on another route. I want to achieve an animation similar to the ios app open. A card expands to the whole page, while all other cards keep mounted until the animation ends. The standard way of keeping both routes mounted is to use react-transition-group
as described in the Router's official docs here. I added it as they recommend but here is the problem I hope you can help me with:
If I understand correctly, <Flipper>
can handle only one <Flipped>
with given flipId
. If we have both routes mounted at the same time we get items with duplicate flipId
's rendered. What first comes to mind is to change the card's flipId
somehow, or even stop rendering it at all. But it feels like a workaround for me. Maybe you have a better idea?
I think playing with the flipId is not a workaround but rather the suggested way to handle this -- maybe just stop rendering it for the elements on the exiting page?
Actually, I found that I can use <Flipped>
onExit
callback for keeping the previous route mounted for as much as I want. This feels much much better than hacking react-transition-group
and react-flip-toolkit
together. I will give it a try
Hi, thanks for an awesome lib! I was trying to make a page transition effect with the following structure
Basically, I have two pages, one page with 6 cards, another is just a page with all the info about a selected card. When I click the card it should expand to a full page. Everything is fine with
page -> card
transition, butcard -> page
looks bad. When I click the card the whole page disappears instantly and I see the animation of expanding page on a white screen. Looks like it is removed from DOM too early. What am I missing?