我认为答案是“是的,这是可能的”。
我在CodePen上写了一个
概念验证。使用
ReactCSSTransitionGroup
时有一些需要注意的地方,其中之一在
Google Groups的这个讨论中提到。在那里,有人说:
你需要保留ReactCSSTransitionGroup并添加/删除其内容。
所以,基本上,如果您有一个将动画应用于其子元素的组件,则需要将子元素包装在
ReactCSSTransitionGroup
中。以下是基于我的示例的伪代码:
假设您的路由器设置如下:
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Route>
</Router>
我希望能够对<App>
的子组件进行动画效果。以下是可能的效果展示:
function App(props) {
return (
<div>
<h1>App</h1>
<nav>
<ul>
<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
</ul>
</nav>
<ReactCSSTransitionGroup>
{React.cloneElement(props.children, {
key: getKey(props.location.pathname)
})}
</ReactCSSTransitionGroup>
</div>
);
}
请注意,您需要将
ReactCSSTransitionGroup
放在子组件之外。此外,每个元素都需要一个唯一的键,以便
ReactCSSTransitionGroup
可以跟踪它们。通常,路径名是一个很好的选择。在我的特定用例中,我使用了一个函数来获取路径名的某个前缀,这样在导航库之间时,此级别的转换就不会发生。您会明白我的意思。
我可以在
<Repos>
组件中做类似的事情:
function Repos(props) {
return (
<div>
<h2>Repos</h2>
<ul>
<li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
<li><NavLink to="/repos/facebook/react">React</NavLink></li>
</ul>
<ReactCSSTransitionGroup>
{props.children ?
React.cloneElement(props.children, {
key: props.location.pathname
}) :
null}
</ReactCSSTransitionGroup>
</div>
);
}
类似的想法在这里。这一次我使用了完整的路径名,因为在这个级别上,我确实希望在各个仓库之间进行过渡。
我还没有在大型应用程序上尝试过这个方法,所以我会听从更有经验的人的建议。然而,正如我之前所说,这至少应该是可能的。您应该能够组合简单的动画来获得复杂的动画效果。