CODEWITHSUNDEEP
reactjsreact-router-dom
WebArtisan
WebArtisan

Reputation: 4227

react-router-transition - how to get custom transition?

I'm using https://github.com/maisano/react-router-transition for animating between routes, but only animation I get, is fade, which is pity.

I'm trying to use other animation from docs, but it didn't work at all:

atEnter={{ translateX: 100 }}
atLeave={{ translateX: -100 }}
atActive={{ translateX: 0 }}

So, routes just switch without any animation(only with slight delay).

What did I miss? And how can I create my own custom transitions for route switch? Is that possible at all with this package?

My render code in root component with fade example:

import { RouteTransition } from 'react-router-transition';
//... other imports

<BrowserRouter>
    <Route render={({location, history, match}) => {
        return (
            <div>
                <RouteTransition
                    className="app-route-transition"
                    pathname={location.pathname}
                    atEnter={{ opacity: 0 }}
                    atLeave={{ opacity: 0 }}
                    atActive={{ opacity: 1 }}
                >
                    <Switch key={location.key} location={location}>
                        <Route exact path="/" component={Home}/>
                        <Route path="/users" component={Users}/>
                        <Route path="/search" component={Search}/>
                    </Switch>
                </RouteTransition>
            </div>
        );
    }} />
</BrowserRouter>

So, only FADE animation works for me.

Upvotes: 3

Views: 912

Answers (1)

Lim Kayas
Lim Kayas

Reputation: 342

You forget to add styles map to props and dont forget to add position absolute for your .app-route-transition childs

there you can manipulate your custom transitions.

mapStyles={styles => ({ transform: `translateX(${styles.translateX}%)` })}

And:

.app-route-transition {
  > * {
    position: absolute;
  }
}

Also you can combine your animations. For example:

<RouteTransition
  className="app-route-transition"
  pathname={location.pathname}
  atEnter={{ translateY: 20, opacity: 0}}
  atLeave={{ translateY: 20, opacity: 0}}
  atActive={{ translateY: 0, opacity: 1}}
  mapStyles={styles => ({
    transform: `translateY(${styles.translateY}%)`,
    opacity: styles.opacity
  })}
>

Upvotes: 4

Related Questions