javascript - 切换路线动画

Question

最近，我使用 ReactCSSTransitions 从一侧“滑动”新页面。这工作正常，当然，除了现在实现它的那一刻，前一页将是空白的。我需要让前一个页面保持呈现状态，直到我的新页面从切换路线的侧面动画化。

哪种方法才是正确的实现方式？我是否需要强制收集一个 HTML 页面并将其拖到新页面旁边并保存以供我按“返回”时使用？

Answer 1

我建议使用 react-router-transition，而不是使用过渡组手动执行此操作相反。

你必须在你的 top love root 应用程序组件中做这样的事情:

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 中的当前解决方案.