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

切换路线动画

1 个答案: