reactjs - 使用ReactCSSTransitionGroup和React Router可以制作复杂的动画吗？

我想知道ReactCSSTransitionGroup是否适合我的用例。

在一条路线上，我有一个搜索按钮，当用户单击它时，该按钮应在加载到搜索页面中时过渡。加载后，页面的某些区域将从侧面进行动画处理。

我将它与React Router一起使用，因此整个页面过渡看起来很简单，但是以这种方式设置特定元素的动画似乎更具挑战性。

ReactCSSTransitionGroup应该能够处理这个问题还是应该寻找替代方案？

最佳答案

我认为答案是“是的，有可能”。

我在CodePen上写了proof of concept。 ReactCSSTransitionGroup有一些陷阱，this discussion on 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>
  );
}

类似的想法在这里。这次我使用完整的路径名，因为在这个级别上，我确实希望在各个存储库之间进行转换。

我尚未在大型应用程序上尝试此操作，因此我会请有经验的人来做。但是，正如我之前所说，至少应该有可能。您应该能够撰写简单的动画以获得复杂的动画。

关于reactjs - 使用ReactCSSTransitionGroup和React Router可以制作复杂的动画吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36403930/