轉場效果

這些主題輔助工具讓您能夠建立自訂的 CSS 轉場效果，您可以自訂持續時間、緩和效果等等。

API

`theme.transitions.create(props, options) => transition`

參數

props (string | string[]): 預設為 ['all']。提供一個 CSS 屬性，或是一個應該套用轉場效果的 CSS 屬性列表。
options (object [optional])

options.duration (string | number [optional]): 預設為 theme.transitions.duration.standard。提供轉場效果的持續時間。
options.easing (string [optional]): 預設為 theme.transitions.easing.easeInOut。提供轉場效果的緩和效果。
options.delay (string | number [optional]): 預設為 0。提供轉場效果的延遲時間。

回傳值

transition: 一個 CSS 轉場效果值，其中包含所有應該套用轉場效果的 CSS 屬性，以及定義的持續時間、緩和效果和延遲時間。

使用 theme.transitions.create() 輔助工具，為您的 UI 元素建立一致的轉場效果。

theme.transitions.create(['background-color', 'transform']);

範例

`theme.transitions.getAutoHeightDuration(height) => duration`

參數

height (number): 元件的高度。

回傳值

duration: 根據高度計算出的持續時間。

持續時間

您可以變更部分或全部的持續時間值，或提供您自己的值（用於 create() 輔助工具中）。此範例顯示所有預設值（以毫秒為單位），但您只需要提供您想要變更或新增的鍵。

const theme = createTheme({
  transitions: {
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      // most basic recommended timing
      standard: 300,
      // this is to be used in complex animations
      complex: 375,
      // recommended when something is entering screen
      enteringScreen: 225,
      // recommended when something is leaving screen
      leavingScreen: 195,
    },
  },
});

緩和效果

您可以變更部分或全部的緩和效果值，或透過提供自訂的 CSS transition-timing-function 值來提供您自己的值。

const theme = createTheme({
  transitions: {
    easing: {
      // This is the most common easing curve.
      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
      // Objects enter the screen at full velocity from off-screen and
      // slowly decelerate to a resting point.
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      // Objects leave the screen at full velocity. They do not decelerate when off-screen.
      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
      // The sharp curve is used by objects that may return to the screen at any time.
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
    },
  },
});

參考資料

請查看「轉場效果」頁面，以探索 Material UI 包含的轉場效果元件。