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

Question

我试图找到在react-router中的路由之间制作动画的文档.

我看到以下问题有一些讨论.在评论结束时,我看到lulridge给出了一个非常好的例子

那么......这个例子是反应路由器中路由之间动画的正确/推荐方法吗？这会导致路线之间的转换,无论路线,图像,文字中显示什么内容？

注意:它似乎排序的工作对我来说,但过渡的平滑度似乎取决于每个路由之间有多少数据被加载.

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部分下的React github文档中有动画文档.

原始问题中的代码几乎与文档中的代码相同,但文档(下面)中的示例还包括转换超时(建议使用).

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

对于info,transitionEnterTimeout和transitionLeaveTimeout属性到达React 0.14,在0.14版本说明中有更多关于它们的信息:

附加组件:为了提高可靠性,"CSSTransitionGroup"将不再监听转换事件.相反,您应该使用诸如'transitionEnterTimeout = {500}'之类的道具手动指定转换持续时间.

Answer 2

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