基于路由过渡并仅对某些组件进行动画处理答案

【问题标题】：Based on the routing transition and animate only certain components基于路由过渡并仅对某些组件进行动画处理
【发布时间】：2016-08-01 16:20:03
【问题描述】：

我有一个带有导航等选项卡的 React Web 应用程序，每个选项卡都有一个单独的路由。通过某个路线，我可以访问某个选项卡，反之亦然，单击某个选项卡可以让我到达该路线。

问题是我想让从选项卡到过渡的路由只对某些组件而不是整个视图进行动画处理 - 只有那些根据路由实际改变的组件。

是否可以根据路线仅对某些组件进行动画处理？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您的路由应该有一个共同的父级，它将使用 react css 过渡组为过渡设置动画：

<Route path="/" component={App}> // The parent
    <IndexRoute component={HomePage}/>
    <Route path="page1" component={Page1}/>
    <Route path="page1" component={Page2}/>
    <Route path="page1" component={Page3}/>
    <Route path="page1" component={Page4}/>
</Route>

在路由容器中决定路径是否应该动画，并打开/关闭transitionEnter和transitionLeave：

const App = ({ children, location }) => {
  const pathsToAnimate = ['/page1', '/page3']; // a list of routes that should animate
  const shouldAnimate = pathsToAnimate.includes(location.pathname); // check if the current route is among the pathsToAnimate
  return (
    <div>
      <ReactCSSTransitionGroup
        component="div"
        transitionName="example"
        transitionEnter={ shouldAnimate } // animate if shouldAnimate is true
        transitionLeave={ shouldAnimate } // animate if shouldAnimate is true
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
      >
        {React.cloneElement(children, {
          key: location.pathname
        })}
      </ReactCSSTransitionGroup>

    </div>
  );
};

【讨论】：