ZoomAPI

React Zoom 元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。

Demos

如需此 React 元件的使用範例和詳細資訊，請造訪元件展示頁面

import Zoom from '@mui/material/Zoom';
// or
import { Zoom } from '@mui/material';

閱讀本指南以了解有關最小化 bundle size 的差異。

Zoom 轉場效果可用於 Button 元件的浮動變體。它在內部使用 react-transition-group。

Transition 元件的 Props 也可用。

名稱	類型	預設	描述
children*	element	-	單一子內容元素。這需要能夠容納 ref。
addEndListener	func	-	新增自訂轉場結束觸發器。使用轉場 DOM 節點和完成回呼呼叫。允許更精細的轉場結束邏輯。注意：如果提供，Timeout 仍會用作後備方案。
appear	bool	true	如果 `in` 也為 `true`，則在首次掛載時執行進入轉場效果。設定為 `false` 以停用此行為。
easing	{ enter?: string, exit?: string } \| string	-	轉場時間函數。您可以指定單一 easing 或包含 enter 和 exit 值的物件。
in	bool	-	如果為 `true`，元件將會轉場進入。
timeout	number \| { appear?: number, enter?: number, exit?: number }	{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }	轉場效果的持續時間，以毫秒為單位。您可以為所有轉場效果指定單一 timeout，或個別使用物件。

ref 會轉發到根元素。

雖然上面未明確記錄，但來自 react-transition-group 的 Transition 元件的 props 也可在 Zoom 中使用。您可以利用此優勢來定位巢狀元件。

如果您在本頁面中找不到資訊，請考慮查看元件的實作以了解更多詳細資訊。