Javascript 在react router中，在路由之间设置动画/转换的正确方法是什么

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

我看下面有一些讨论。在评论的最后，我看到卢里奇给出了一个非常好的回答

所以。。。此示例是在react router中设置路由间动画的正确/推荐方法吗？无论路线、图像、文本中显示什么内容，这是否会导致路线之间的转换

注意：这似乎对我来说是可行的，但转换的顺利程度似乎取决于每条路由之间加载了多少数据

JS

// 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>

.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;
}

---

是的，你做得对。只需确保在

组件上指定唯一的

键

属性即可。路由名称通常是一个不错的选择。

对于稍后讨论此问题的任何人，现在都可以在的React github文档中找到动画文档

原始问题中的代码与文档中的代码几乎相同，但文档中的示例（如下）也包括建议的过渡超时

{items}

有关在React 0.14中提供的TransitionInterTimeout和transitionLeaveTimeout属性的信息，请参阅以下内容：

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

---

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

我在github/youtube上有视频和代码

我希望这对你有用。

---

@gpltaylor

很酷，如果能看到一些文档就好了，但我想这是一个非常新的功能…是的，文档方面还没有太多内容，但react router的示例目录中应该有一个动画示例。

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