Flip route change

[Fxlr8]

Hi, thanks for an awesome lib! I was trying to make a page transition effect with the following structure

<Flipper flipKey={this.props.location.pathname}
    <Switch>
        <Route path='/' component={CardList}>
        <Route path='/card:id' component={CardPage}>
    </Switch>
</Flipper>

const CardList = () => {
    <div>
        <Flipped flipId='card1'>
            <Card>
        </Flipped>
        ...
        <Flipped flipId='card6'>
            <Card>
        </Flipped>
    </div>
}

const CardPage = (id) => {
    <Flipped flipId={`card${id}`}>
        *some page contect*
    </Flipped>
}

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, but card -> pagelooks 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?

[Fxlr8]

I can see that you use react-router's <Prompt> here:

react-flip-toolkit-router-example/src/IconSetPage/index.js

Lines 99 to 104 in 5522d1b

	setAnimatingOut = ({ pathname }) => {
	if (pathname === "/") {
	this.onExit(this.el)
	return "350"
	}
	}

react-flip-toolkit-router-example/src/IconSetPage/index.js

Line 117 in 5522d1b

<Prompt message={this.setAnimatingOut} />

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?

[aholachek]

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.

[Fxlr8]

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?

[aholachek]

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?

[Fxlr8]

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