在反应路由器中的路线之间动画/转换的正确方法是什么答案

【问题标题】：What is the correct way to animate/transition between routes in react router在反应路由器中的路线之间动画/转换的正确方法是什么
【发布时间】：2015-06-24 00:58:56
【问题描述】：

我试图在 react-router 中查找用于在路由之间设置动画的文档。

我看到下面issue 有一些讨论。在 cmets 快结束时，我看到 lulridge 给了一个非常好的example

那么......这个例子是在反应路由器中的路由之间制作动画的正确/推荐方式吗？无论路由、图像、文本中显示什么内容，这是否会导致路由之间的转换？

注意：它似乎有点对我有用，但过渡的平滑度似乎取决于每条路线之间加载了多少数据。

// the key part in your top level route/component e.g. Layout.js 
// where you wrap the RouteHandler in the TransitionGroup

import React from 'react/addons'
let TransitionGroup = React.addons.CSSTransitionGroup;
let { RouteHandler, Link } = require('react-router')

<TransitionGroup component="div" transitionName="page-transition">
  <RouteHandler {...this.props} />
</TransitionGroup>

CSS

.page-transition-enter {
  -webkit-transition: opacity 0.3s ease-in-out;
          transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
}
.page-transition-enter.page-transition-enter-active {
  opacity: 1;
}
.page-transition-leave {
  -webkit-transition: opacity 0.3s ease-in-out;
          transition: opacity 0.3s ease-in-out;
  opacity: 1;
  position: absolute;
}
.page-transition-leave.page-transition-leave-active {
  opacity: 0;
}

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

对于以后来这里的任何人，现在在 Add Ons/Animation section 下的 React github 文档中提供了动画文档。

原始问题中的代码与文档中的代码几乎相同，只是文档中的示例（如下）还包括转换超时，这是推荐的。

    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
      {items}
    </ReactCSSTransitionGroup>

有关在 React 0.14 中引入的 transitionEnterTimeout 和 transitionLeaveTimeout 属性的信息，0.14 Release Notes 中有更多关于它们的信息：

附加组件：为了提高可靠性，“CSSTransitionGroup”将不再监听转换事件。相反，您应该指定转换使用诸如“transitionEnterTimeout={500}”之类的道具手动设置持续时间。

【讨论】：

【解决方案2】：

是的，你做对了。只要确保在<RouteHandler/> 组件上指定一个唯一的key 属性即可。路线名称通常是一个不错的选择。

【讨论】：

酷，看看一些文档会很高兴，但我想这是一个相当新的功能......
是的，文档的方式还不算多，但 react-router 的示例目录中应该有一个动画示例。

【解决方案3】：

随着 React Router v4 的引入，这变得容易多了。我们现在可以使用 HOC 在 RRv4 中进行转换。

我在 github/youtube 上有一个 vid 和代码。

https://www.youtube.com/watch?v=MiOqASZnKqA

https://github.com/gpltaylor/react-router-workshop/

我希望这对你有用。 @gpltaylor

【讨论】：