在反应路由器中的路由之间 animate/transition 的正确方法是什么

Question

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

我看到以下内容issue has some discussion on it. Near the end of the comments, I see lulridge gave a pretty nice example

所以...这个例子是 correct/recommended 在 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

是的，您做对了。请务必在 <RouteHandler/> 组件上指定一个唯一的 key 属性。路线名称通常是一个不错的选择。

Answer 2

对于以后接触到此内容的任何人，现在在 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}'.

Answer 3

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

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

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

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

希望对你有用。 @gpltaylor

在反应路由器中的路由之间 animate/transition 的正确方法是什么

What is the correct way to animate/transition between routes in react router

javascript

reactjs

react-router