淡入淡出API
React Fade 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
導入
import Fade from '@mui/material/Fade';
// or
import { Fade } from '@mui/material';閱讀這份關於最小化套件大小的指南，以了解差異。
Fade 轉場效果由 Modal 組件使用。它在內部使用 react-transition-group。
Transition 組件的 Props 也可用。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| children* | element | - | 單一子內容元素。 |
| addEndListener | func | - | 新增自訂轉場結束觸發器。使用轉場中的 DOM 節點和完成回呼呼叫。允許更精細的轉場結束邏輯。注意：如果提供，逾時仍會用作備用方案。 |
| 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, } | 轉場的持續時間，以毫秒為單位。您可以為所有轉場指定單一逾時，或使用物件個別指定。 |
ref 會轉發到根元素。
繼承
雖然上面沒有明確記錄，但 react-transition-group 的 Transition 組件的 props 也可在 Fade 中使用。您可以利用這一點來鎖定巢狀組件。
原始碼
如果您在本頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。