筆記 | react-transition-group 實現路由切換過渡動畫

-Advertisement-

一、react-transition-group 使用相關技術的使用： React 18 React router v6 React Transition Group 是一個 React 庫，專門用於在 React 應用中管理和處理過渡動畫效果。這個庫提供了一組組件，包括 Transition、C ...

一、react-transition-group 使用

相關技術的使用：

React 18
React router v6

React Transition Group 是一個 React 庫，專門用於在 React 應用中管理和處理過渡動畫效果。這個庫提供了一組組件，包括 Transition、CSSTransition、SwitchTransition 和 TransitionGroup，幫助在組件的進入和退出時應用動畫效果。
Transition 是一個與平臺無關的組件，通常結合 CSS 完成樣式。
CSSTransition 是一個常用的組件，廣泛用於添加過渡動畫效果。它具有動畫的作用時間（timeout）和指定元素首次渲染在頁面時是否進行動畫（appear）等參數。
SwitchTransition 用於在兩個組件顯示和隱藏切換時使用。
TransitionGroup 將多個動畫組件包裹在其中，一般用於列表中元素的動畫。執行中有三個狀態：appear，enter，exit，這需要定義對應的 CSS 樣式。
React Transition Group 可以應對大量常見簡單動畫，但如果需要編寫高級動畫，建議使用其他庫如 react-spring、framer-motion 等。

Layout的示例偽代碼

import { CSSTransition, SwitchTransition } from 'react-transition-group';
import { useLocation, useNavigate, useOutlet } from 'react-router-dom';

const currentOutlet = useOutlet();
...
<Layout className="site-layout">
  <Content className="site-content">
    <SwitchTransition mode="out-in">
      <CSSTransition
          key={location.pathname}
          appear={true}
          timeout={300}
          classNames="page"
          unmountOnExit
      >
        {currentOutlet}
      </CSSTransition>
    </SwitchTransition>
  </Content>
</Layout>

因為 CSSTransition 的 classNames 為 page：


// 頁面切換過渡動畫
.page {
  position: absolute;
  left: 15px;
  right: 15px;
}

// 頁面切換過渡動畫 --- 進入
.page-enter {
  opacity: 0;
  transform: scale(1.1);
}

// 頁面切換過渡動畫 --- 進入（被激活）
.page-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

// 頁面切換過渡動畫 --- 離開
.page-exit {
  opacity: 1;
  transform: scale(1);
}

// 頁面切換過渡動畫 --- 離開（被激活）
.page-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

註意事項：

1.網上可以搜到的許多文章里都提到，組件間的切換動畫需要使用 TransitionGroup 來包裹。但是在官網最新的介紹里可以看到這段話

第一反應可能是在 TransitionGroup 中包裹所有路由，但這種方法需要 hack 並且在與 React Router 的更棘手的組件（如 Redirect）一起使用時很容易崩潰。您應該為每個路由使用 CSSTransition 並自行在prop中管理它們。”

2.使用 SwitchTransition 包裹 CSSTransition，這樣不會導致頁面上同時展示 A 頁面和 B 頁面的組件，反之使用 TransitionGroup 進行包裹，就會產生兩個頁面同時存在的情況。
3.最重要的一點：不要直接使用 Outlet 及<Outlet />，而要使用useOutlet。在我沒閱讀官網的代碼前，我嘗試使用 SwitchTransition 和 CSSTransition 對 <Outlet /> 進行包裹，來實現子路由組件的展示。結果：

第一個頁面的離開的動畫丟失了。
第二個頁面會被載入兩次，直觀反映就是頁面閃爍，useEffect(()=>{},[]) 或者 componentDidMount() 被調用兩次。
因為 <Outlet /> 會導致在同一頁面的新舊組件各調用一次介面，所以請使用 useOutlet。

二、 `<Outlet />` 與 useOutlet 區別

<Outlet />和useOutlet都是在React Router中用來實現路由導出的功能，但是它們的使用方式和場景有所不同。

<Outlet />：

<Outlet /> 是一個 React 組件，通常在路由配置中使用，用於指定當前路由的子組件應該被渲染到哪個位置。它是一個受控組件，也就是說，它的值（即要渲染的組件）是由父組件（通常是路由組件）控制的。當父組件的狀態發生改變時，<Outlet /> 會自動更新渲染的組件。
例如，在路由配置中，你可以使用<Outlet />來指定一個位置，用於渲染當前路由的子路由組件：

<Route path="/user/:userId" component={UserPage}>
  <Outlet />
</Route>

在上面的例子中，當用戶訪問一個符合 /user/:userId 路徑的URL時，UserPage組件會被渲染，並且子路由組件會渲染到 <Outlet /> 指定的位置。

useOutlet：

useOutlet 是一個自定義Hook，它允許你在函數組件中使用React Router的功能。通過使用 useOutlet，你可以在組件中獲取到當前路由的子路由組件，並將其渲染到指定的位置。與 <Outlet /> 不同的是，useOutlet 是一個非受控組件，它的值是由調用 Hook 的代碼控制的。useOutlet 是一個鉤子函數，它用於在組件中獲取當前嵌套路由的信息。如果嵌套路由沒有掛載，則 useOutlet 返回 null；如果嵌套路由已經掛載，則 useOutlet 返回嵌套的路由對象。通過使用 useOutlet，可以在組件中獲取嵌套路由的相關信息，例如路徑、查詢參數等。
下麵是使用 useOutlet 的示例：

import { useOutlet } from 'react-router-dom';

function MyComponent() {
  const outlet = useOutlet();
  
  return (
    <div>
      <h1>My Component</h1>
      {outlet}
    </div>
  );
}

在上面的例子中，我們通過使用useOutlet獲取到一個outlet對象，然後將這個對象渲染到組件中指定的位置。當路由發生變化時，React Router會自動更新渲染的子路由組件。
總的來說，<Outlet /> 和 useOutlet 在 React Router v6 中都用於處理嵌套路由的相關操作。<Outlet /> 更適合在 React Router 的路由配置中使用，用於在應用程式的當前路由中渲染嵌套的 Route 組件。而 useOutlet 則更適合在函數組件內部使用，用於在組件中獲取當前嵌套路由的信息。

您的分享是我們最大的動力!