javascript 在反应路由器中的路由之间设置动画/转换的正确方法是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31015888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the correct way to animate/transition between routes in react router
提问by svnm
I was trying to find documentation for animating between routes in react-router.
我试图找到在 react-router 中的路由之间进行动画处理的文档。
I see the following issuehas some discussion on it. Near the end of the comments, I see lulridge gave a pretty nice example
我看到以下问题对此有一些讨论。在评论的最后，我看到 lulridge 举了一个很好的例子
So... is this example the correct/recommended way to animate between routes in react router? Will this cause a transition between routes no matter what content is displayed in the route, images, text?
那么......这个例子是在反应路由器中的路由之间设置动画的正确/推荐方法吗？无论路线、图像、文本中显示什么内容，这是否会导致路线之间的过渡？
Note:It does seem to sort ofwork for me, but the smoothness of the transition seems to depend on how much data is loaded between each route.
注：它似乎排序的工作对我来说，但过渡的平滑度似乎取决于每个路由之间有多少数据被加载。
JS
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
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;
}
采纳答案by glortho
Yes, you're doing it the right way. Just be sure to specify a unique keyattribute on the <RouteHandler/>component. The route name is generally a good option.
是的，你做对了。只要确保key在<RouteHandler/>组件上指定一个唯一的属性。路线名称通常是一个不错的选择。
回答by tomRedox
To anyone coming to this later, there is now documentation for animation on the React github documentation under the Add Ons/Animation section.
对于稍后要讨论的任何人，现在在 React github 文档的Add Ons/Animation 部分下有动画文档。
The code in the original question is almost identical to that in the documentation, with the exception that the example from the documentation (below) also includes transition timeouts, which is recommended.
原始问题中的代码与文档中的代码几乎相同，除了文档中的示例（下面）还包括转换超时，这是推荐的。
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {items} </ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> {items} </ReactCSSTransitionGroup>
For info the transitionEnterTimeout and transitionLeaveTimeout properties arrived in React 0.14, there's a small amount more about them in the 0.14 Release Notes:
有关 transitionEnterTimeout 和 transitionLeaveTimeout 属性在 React 0.14 中的信息，在0.14 发行说明中有更多关于它们的信息：
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}'.
附加组件：为了提高可靠性，“CSSTransitionGroup”将不再监听转换事件。相反，您应该使用诸如“transitionEnterTimeout={500}”之类的道具手动指定过渡持续时间。
回答by Garry Taylor
With the introduction of React Router v4, this has got a lot easier. We can now transition within RRv4 using HOC.
随着 React Router v4 的引入，这变得容易多了。我们现在可以使用 HOC 在 RRv4 中进行转换。
I have a vid and code over at github/youtube.
我在 github/youtube 上有一个视频和代码。
https://www.youtube.com/watch?v=MiOqASZnKqA
https://www.youtube.com/watch?v=MiOqASZnKqA
https://github.com/gpltaylor/react-router-workshop/
https://github.com/gpltaylor/react-router-workshop/
I hope this is useful to you. @gpltaylor
我希望这对你有用。@gpltaylor
