react-router-transition - 如何获得自定义转换？答案

【问题标题】：react-router-transition - how to get custom transition?react-router-transition - 如何获得自定义转换？
【发布时间】：2018-02-04 20:23:53
【问题描述】：

我正在使用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 动画适合我。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您忘记将样式映射添加到道具，并且不要忘记为您的 .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
  })}
>

【讨论】：