reactjs - React-router-transition - 如何获得自定义转换？

Question

我正在使用https://github.com/maisano/react-router-transition用于路线之间的动画，但我得到的只有动画，是淡入淡出，这很遗憾。

我尝试使用文档中的其他动画，但它根本不起作用:

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

因此，路线只是切换而没有任何动画(仅略有延迟)。

我错过了什么？如何为路由切换创建自己的自定义转换？这个包可以做到这一点吗？

我在根组件中的渲染代码与淡入淡出示例:

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>

所以，只有 FADE 动画适合我。

Answer 1

您忘记将样式映射添加到 Prop ，并且不要忘记为您的 .app-route-transition 子级添加绝对位置

在那里您可以操纵自定义转换。

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

还有:

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

您还可以组合动画。例如:

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