javascript - 在 react 路由器中的路由之间设置动画/转换的正确方法是什么

Question

我试图找到有关在 react-router 中的路由之间设置动画的文档。

我看到以下 issue对此有一些讨论。在评论接近尾声时，我看到 lulridge 给出了一个很好的 example

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

注意:它似乎有点对我有用，但转换的平滑度似乎取决于每条路线之间加载的数据量。

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>

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

Answer 1

对于任何后来来到这里的人，现在在 Add Ons/Animation section 下的 React github 文档中有关于动画的文档。 .

原始问题中的代码与文档中的代码几乎相同，除了文档中的示例(下方)还包括推荐的转换超时。

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

有关 transitionEnterTimeout 和 transitionLeaveTimeout 属性到达 React 0.14 的信息，0.14 Release Notes 中有少量关于它们的信息:

Add-Ons: To improve reliability, 'CSSTransitionGroup' will no longer listen to transition events. Instead, you should specify transition durations manually using props such as 'transitionEnterTimeout={500}'.