基于路由转换并仅动画某些组件

Question

我有一个React web应用程序，其中包含导航等选项卡，每个选项卡都有一个单独的路径。使用特定的路线，我可以访问特定的选项卡，反之亦然，单击某个选项卡可以使我进入该路线。

问题是我想从选项卡进行转换和动画只有某些组件，而不是整个视图 - 只有实际上根据路线变化的那些。

取决于路线，只有某些组件可以动画吗？

Answer 1

你应该航线有一个共同的父，将使用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> 
); 
};