Question

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

我看到以下issue对此进行了一些讨论。在评论结束时，我看到lulridge给了一个非常好的example

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

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

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>

对于info，transitionEnterTimeout和transitionLeaveTimeout属性到达React 0.14，0.14 Release Notes中有更多关于它们的信息：

Add-Ons：为了提高可靠性，CSSTransitionGroup＆＃39;将不再听取过渡事件。相反，您应该指定转换持续时间手动使用道具，例如＆lt; transitionEnterTimeout = {500}＆＃39;。

Answer 2

是的，你正在以正确的方式做到这一点。请务必在key组件上指定唯一的<RouteHandler/>属性。路线名称通常是一个不错的选择。

Answer 3

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

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

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

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

我希望这对你有用。 @gpltaylor

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

3 个答案: