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

您忘记将样式映射添加到道具，并且不要忘记为您的孩子添加绝对位置。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
  })}
>

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

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

reactjs

react-router-dom