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

iNSlog發表於2024-03-02
筆記React路由動畫

一、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中用來實現路由匯出的功能，但是它們的使用方式和場景有所不同。

  1. <Outlet />：

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

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

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

  1. 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 則更適合在函式元件內部使用，用於在元件中獲取當前巢狀路由的資訊。

相關文章