Collapse
從子元素的起始邊緣展開。如果需要水平摺疊，請使用 orientation prop。collapsedSize prop 可用於設定未展開時的最小寬度/高度。
Fade
從透明淡入至不透明。
Slide
從螢幕邊緣滑入。direction prop 控制轉場效果從螢幕的哪個邊緣開始。
Transition 元件的 mountOnEnter prop 可防止子元件在 in 為 true 之前被掛載。這可防止相對定位的元件從螢幕外的位置滾動到視窗中。同樣地，unmountOnExit prop 會在元件轉場效果離開螢幕後，將其從 DOM 中移除。
相對於容器滑動
Slide 元件也接受 container prop，它是對 DOM 節點的引用。如果設定此 prop，Slide 元件將從該 DOM 節點的邊緣滑動。
子元件要求
- 轉發 style：為了更好地支援伺服器端渲染，Material UI 為某些轉場效果元件（Fade、Grow、Zoom、Slide）的子元件提供了
styleprop。styleprop 必須應用於 DOM，動畫才能如預期般運作。 - 轉發 ref：轉場效果元件要求第一個子元件將其 ref 轉發到 DOM 節點。有關 ref 的更多詳細資訊，請查看Ref 的注意事項
- 單一元素：轉場效果元件僅需要一個子元素（不允許使用
React.Fragment）。
// The `props` object contains a `style` prop.
// You need to provide it to the `div` element as shown here.
const MyComponent = React.forwardRef(function (props, ref) {
return (
<div ref={ref} {...props}>
Fade
</div>
);
});
export default function Main() {
return (
<Fade>
{/* MyComponent must be the only child */}
<MyComponent />
</Fade>
);
}
TransitionGroup
若要在元件掛載或卸載時製作動畫，您可以使用 react-transition-group 的 TransitionGroup 元件。當元件新增或移除時，in prop 會由 TransitionGroup 自動切換。
- 🍏 蘋果
- 🍌 香蕉
- 🍍 鳳梨
TransitionComponent prop
某些 Material UI 元件在內部使用這些轉場效果。這些元件接受 TransitionComponent prop 以自訂預設轉場效果。您可以使用上述任何元件或您自己的元件。它應符合以下條件
- 接受
inprop。這對應於開啟/關閉狀態。 - 在進入轉場效果開始時呼叫
onEntercallback prop。 - 在退出轉場效果完成時呼叫
onExitedcallback prop。這兩個 callback 允許在關閉狀態且完全轉場後卸載子元件。
有關建立自訂轉場效果的更多資訊，請造訪 react-transition-group Transition 文件。您也可以造訪某些元件的專門章節
效能與 SEO
即使 in={false}，轉場效果元件的內容預設也會掛載。此預設行為考慮了伺服器端渲染和 SEO。如果您在轉場效果內渲染昂貴的元件樹，啟用 unmountOnExit prop 來變更此預設行為可能是個好主意
<Fade in={false} unmountOnExit />
與任何效能最佳化一樣，這並非萬靈丹。請務必先找出瓶頸，然後再嘗試這些最佳化策略。