基於路由轉換並僅動畫某些組件

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