使用 ReactCSSTransitionGroup 和 React Router 可以实现复杂的动画？答案

【问题标题】：Complex animation possible with ReactCSSTransitionGroup and React Router?使用 ReactCSSTransitionGroup 和 React Router 可以实现复杂的动画？
【发布时间】：2016-07-24 01:40:51
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs react-router reactcsstransitiongroup

【解决方案1】：

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

我在 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>
  );
}

这里有类似的想法。这次我使用了完整的路径名，因为在这个级别上，我确实想要在各个 repos 之间进行转换。

我还没有在大型应用程序上尝试过这个，所以我会听从有更多经验的人。但是，正如我之前所说，它至少应该是可能的。您应该能够编写简单的动画以获得复杂的动画。

【讨论】：

【解决方案2】：

ReactCSSTransitionGroup实际上是ReactTransitionGroup的高级接口。如果您使用<TransitionGroup /> 包装您的子元素，您将收到额外的生命周期方法，例如componentWillEnter(callback)、componentWillLeave(callback) 等...您可以在这些方法中运行动画，然后在动画完成时触发回调。我在下面使用 jQuery 进行动画，但您可以使用任何动画库来控制元素。

说明此概念的代码：

<Router history={hashHistory}>
  <Route path="/" component={Parent}>
    <Route path="/child" component={Child}/>
  </Route>
</Router>


var Child = React.createClass({
  componentWillEnter: function(callback) {
    var $this = $(ReactDOM.findDOMNode(this));
    $this.css({ opacity: 0 });
    $this.fadeIn('slow', callback);
  },
  componentWillLeave: function(callback) {
    var $this = $(ReactDOM.findDOMNode(this));
    $this.fadeOut('slow', callback);
  },
  render: function() {
    return (
      <p>This child element will fade in when entering and fade out when leaving.</p>
    )
  }
});

var Parent = React.createClass({
  render: function() {
    return (
      <h1>Parent element</h1>
      <TransitionGroup>
        {this.props.children}
      </TransitionGroup>
    )
  }
});

【讨论】：