Different transition for routes

[MikeDabrowski]

Hi, I'd like to use slideLeft/Right in my app, however I'd like to control which route uses which transition effect depending from where you access it.

Lets have four tabs A,B,C,D . Default is A.
From A to any other lets use slideLeft.
From B to C or D still slideLeft, but to A slideRight.

Now I'm using example from main 'wiki' of this repo:

<Route render={({location, history, match}) => {
  return (
    <RouteTransition pathname={location.pathname} {...presets.slideLeft} >
	<Switch key={location.key} location={location}>
		<Route exact path="/" component={Home}/>
		<Route path="/projects" component={ProjectsPage} />
		<Route exact path="/about" component={AboutPage}/>
	</Switch>
    </RouteTransition>
);}} />

I tried:

<Route render={({location, history, match}) => {
	return (
		<Switch key={location.key} location={location.pathname}>
			<RouteTransition  {...presets.slideRight}>
				<Route exact path="/" component={Home}/>
			</RouteTransition>,
			<RouteTransition  {...presets.slideLeft}>
				<Route path="/projects" component={ProjectsPage}/>
			</RouteTransition>,
			<RouteTransition {...presets.slideLeft}>
				<Route exact path="/about" component={AboutPage}/>
			</RouteTransition>
		</Switch>
);}}/>

Renders only first Route

And:

<Route render={({location, history, match}) => {
	return (
		<RouteTransition pathname={location.pathname} {...presets.slideRight}>
			<Route exact path="/" component={Home}/>
		</RouteTransition>
);}}/>
<Route render={({location, history, match}) => {
	return (
		<RouteTransition pathname={location.pathname} {...presets.slideLeft}>
			<Route path="/projects" component={ProjectsPage}/>
		</RouteTransition>
);}}/>
<Route render={({location, history, match}) => {
	return (
		<RouteTransition pathname={location.pathname} {...presets.slideLeft}>
			<Route exact path="/about" component={AboutPage}/>
		</RouteTransition>
);}}/>

Which works ok but feels redundant.

Is this the way to go?

[djbwise]

I am trying to do the same thing. What I think we really need to do is dynamically change the transition depending on which page you are coming from. Have you figured out how to do this?

[MikeDabrowski]

Finally I used this

and modified AnimattedWrapper HOC to get style as parameter:
const AnimatedWrapper = (WrappedComponent,style) => class AnimatedWrapper
const Home = AnimatedWrapper(HomeComponent,'leftToRight');

It works nice. Last thing I need is to store previous route, but I didn't find a way to do that.

[RonjaKnudtsen]

In react router you can pass in a custom state. It was a bit tricky because you dont give it to the route, but to the link or history.push function. I gave all the elements in my tab a state.tabindex from 0-4.
this.props.history.push({pathname: item.path, state: {tabIndex: item.tabIndex}});

Then in the route transition I can check whether or not the previous tab is bigger or smaller, indicating the direction.

The only issue now is that the location.state is undefined before you do any navigation. But for now I can assume that they start from the leftmost tab.

I also have some routes that are not going to have a left to right transition, eg. subpages.

let animStyle = {};
if (location.state !== undefined) {
    if (location.state.tabIndex > prevTab) {
        animStyle = { e: 10, l: -10 };
    } else {
        animStyle = { e: -10, l: 10 };
    }
    prevTab = location.state.tabIndex;
} else {
    animStyle = { e: 0, l: 0, };
}

...

<RouteTransition
    pathname={location.pathname}
    atEnter={{ translateX: spring(animStyle.e) }}
    atLeave={{ translateX: spring(animStyle.l) }}
    atActive={{ translateX: 0 }}
    mapStyles={styles => ({ transform: `translateX(${styles.translateX * 10}%)` })}
>

[damianobarbati]

Did any of you manage to have slideLeft/Right in new 1.x version?
@MikeDabrowski are you sticking to 0.x to use presets?

[MikeDabrowski]

@damianobarbati
I'm taking a break from that project. I left it with what I wrote in previous post.