react-router-transition - comment obtenir une transition personnalisée?

Question

J'utilise https://github.com/maisano/react-router-transition pour animer entre les routes, mais seulement l'animation que je reçois, est fondu, ce qui est dommage.

Je suis en train d'utiliser d'autres l'animation de documents, mais il ne fonctionne pas du tout:

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

Ainsi, les routes zappent sans animation (uniquement avec un léger retard).

Qu'est-ce que j'ai manqué? Et comment puis-je créer mes propres transitions personnalisées pour le changement de route? Est-ce possible avec ce forfait?

Mon render code composant racine par exemple fondu:

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> 

Alors, ne fonctionne animation FADE pour moi.

Answer 1

Vous oubliez d'ajouter des styles à carte accessoires et à ne pas oublier d'ajouter une position absolue pour votre route il .app transition childs

vous pouvez manipuler vos transitions personnalisées.

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

Et:

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

vous pouvez également combiner vos animations. Par exemple:

<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 
    })} 
>