Question

我正在使用https://github.com/maisano/react-router-transition在路线之间制作动画，但只有我得到的动画才会消失，这很可惜。

我正在尝试使用来自文档的其他动画，但它根本不起作用：

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>

因此，路线只是在没有任何动画的情况下切换（只是稍有延迟）。

我错过了什么？如何为路由交换创建自己的自定义转换？这个套餐有可能吗？

我在根组件中使用淡入淡出示例的渲染代码：

std::forward_list<int[5]> buffers;
buffers.push_front(); // What should I pass to create uninitialized array

所以，只有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 - 如何获得自定义转换？

1 个答案: