切换路线动画

Question

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

哪种方法是正确的实现方式？我需要强行收集一个HTML页面并将其拖到新页面旁边并保存以供我按"Go back"时使用吗？

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 under the hood, and the result is pretty nice. You can checkout the demos here. If working with react-router v4, there's already people talking about current solution in this issue thread。

切换路线动画

Switching routes animation

javascript

reactjs

react-router

reactcsstransitiongroup

redux