切换路线动画

Question

最近，我用ReactCSSTransitions从一侧“滑动”新页面。这工作正常，当然，现在执行的那一刻，前一页将是空白的。我需要让上一页保持渲染状态，直到我的新页面从切换路线的一侧开始动画。

这将是实现这一目标的正确方法？我是否需要强行收集HTML页面，并将其与新页面一起拖动，并在按“返回”时保存它？

Answer 1

我不推荐使用react-router-transition来替代过渡组来手动执行此操作。

你必须做你的爱情顶级根应用程序组件是这样的：

import { RouteTransition } from 'react-router-transition' 

<RouteTransition 
    pathname={this.props.location.pathname} 
    atEnter={{ translateX: 100 }} 
    atLeave={{ translateX: -100 }} 
    atActive={{ translateX: 0 }} 
    mapStyles={styles => ({ transform: `translateX(${styles.translateX}%)` 
})}> 
    {this.props.children} 
</RouteTransition> 

它使用react-motion引擎盖下，其结果是相当不错的。您可以结帐演示here。如果使用react-router v4，那么issue thread中已经有人在讨论当前的解决方案。