轉場效果

轉場元件是讓您為元件新增動態效果的工具。

簡介

MUI Base 提供更高階的元件和低階的 Hook，可用於在元件進入和離開畫面時新增動畫效果。

元件

MUI Base 提供兩個元件，以涵蓋使用 CSS transitions 和 animations 的大多數使用情境。

CSS Transition

透過 CSS transition，您可以平滑地變更 CSS 屬性值。CSS Transition 元件的運作方式是在元素應該顯示和隱藏時新增指定的類別名稱；由您自行定義這些類別的任何轉場效果。

以下範例定義了 open 和 close 類別，並設定 CSS Transition 元件以相應地套用它們：由於 close 類別具有多個不同持續時間的轉場效果 (transform 轉場效果為 400 毫秒，而 opacity 和 filter 轉場效果為 200 毫秒)，您必須讓轉場元件知道哪個屬性需要最長時間才能完成。lastTransitionedPropertyOnExit 正是為此目的服務。

<style>{styles}</style>
<PopupWithTrigger>
  <CssTransition
    enterClassName="open"
    exitClassName="close"
    lastTransitionedPropertyOnExit="transform"
  >
    <PopupBody>This is an animated popup</PopupBody>
  </CssTransition>
</PopupWithTrigger>

<style>{styles}</style>
<PopupWithTrigger>
  <CssTransition
    enterClassName="open"
    exitClassName="close"
    lastTransitionedPropertyOnExit="transform"
  >
    <PopupBody>This is an animated popup</PopupBody>
  </CssTransition>
</PopupWithTrigger>

按下 Enter 鍵開始編輯

通常，如果元素出現在 DOM 中，並且已經具有帶有轉場效果的 CSS 類別，則不會觸發此轉場效果 (因為沒有要從中轉場的狀態)。CSS Transition 元件透過在掛載元件時使用 exitClassName，並在短暫的時刻後將類別名稱變更為 enterClassName 來解決此問題。這可確保即使在退出時從 DOM 中移除已轉場的元素，仍會套用進入轉場效果。

CSS Animation

CSS animation 提供比 transitions 更大的彈性。您可以定義多個關鍵影格，以更好地控制動畫播放。

CSS Animation 元件透過套用 CSS 類別 (來自 enterClassName 或 exitClassName 屬性) 來觸發動畫。

<style>{styles}</style>
<PopupWithTrigger>
  <CssAnimation
    enterClassName="anim-open"
    exitClassName="anim-close"
    enterAnimationName="open-animation"
    exitAnimationName="close-animation"
  >
    <PopupBody>This is an animated popup</PopupBody>
  </CssAnimation>
</PopupWithTrigger>

<style>{styles}</style>
<PopupWithTrigger>
  <CssAnimation
    enterClassName="anim-open"
    exitClassName="anim-close"
    enterAnimationName="open-animation"
    exitAnimationName="close-animation"
  >
    <PopupBody>This is an animated popup</PopupBody>
  </CssAnimation>
</PopupWithTrigger>

按下 Enter 鍵開始編輯

Hooks

如果內建元件無法滿足您的需求，或者您想要從自己的元件觸發轉場效果，則可以使用 useTransitionTrigger 和 useTransitionStateManager Hook。在控制轉場效果的元件中使用 useTransitionTrigger Hook — 例如，Popup 在內部使用它來請求顯示其內容。

將 useTransitionStateManager 與需要轉場效果的元件一起使用。CSS Animation 和 CSS Transition 元件在渲染時會呼叫此 Hook。

呼叫 useTransitionTrigger 會傳回一個內容 (以及其他屬性)，該內容會被 useTransitionStateManager 讀取。

<Trivia label="Did you know?">
  <SlideDown>
    The Eiffel Tower can grow more than six inches during the summer thanks to
    heat expanding the iron.
  </SlideDown>
</Trivia>

<Trivia label="Did you know?">
  <SlideDown>
    The Eiffel Tower can grow more than six inches during the summer thanks to
    heat expanding the iron.
  </SlideDown>
</Trivia>

按下 Enter 鍵開始編輯

使用第三方函式庫

您可以建立自訂轉接器，以與第三方動畫函式庫搭配使用。此類轉接器應使用 useTransitionStateManager Hook，並將其結果轉換為函式庫可以理解的格式。

請參閱以下範例。

Material UI (React Transition Group)

您可以使用任何來自 Material UI 的轉場效果，或使用 React Transition Group 建構的自訂轉場效果，並使用以下範例中顯示的轉接器。

<PopupWithTrigger>
  <MaterialUITransitionAdapter>
    <Fade timeout={250}>
      <PopupBody>This is an animated popup</PopupBody>
    </Fade>
  </MaterialUITransitionAdapter>
</PopupWithTrigger>

<PopupWithTrigger>
  <MaterialUITransitionAdapter>
    <Fade timeout={250}>
      <PopupBody>This is an animated popup</PopupBody>
    </Fade>
  </MaterialUITransitionAdapter>
</PopupWithTrigger>

按下 Enter 鍵開始編輯

React Spring

React Spring 是另一個流行的動畫函式庫，也可以與 MUI Base 轉場效果 API 一起使用。

<PopupWithTrigger>
  <ReactSpringTransition>
    <PopupBody>This is an animated popup</PopupBody>
  </ReactSpringTransition>
</PopupWithTrigger>

<PopupWithTrigger>
  <ReactSpringTransition>
    <PopupBody>This is an animated popup</PopupBody>
  </ReactSpringTransition>
</PopupWithTrigger>

按下 Enter 鍵開始編輯