过渡

这些主题助手允许您创建自定义 CSS 过渡效果，您可以自定义持续时间、缓动效果等。

API

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

参数

props (string | string[]): 默认为 ['all']。提供一个 CSS 属性，或一个应该过渡的 CSS 属性列表。
options (object [可选])

options.duration (string | number [可选]): 默认为 theme.transitions.duration.standard。提供过渡的持续时间。
options.easing (string [可选]): 默认为 theme.transitions.easing.easeInOut。提供过渡的缓动效果。
options.delay (string | number [可选]): 默认为 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 中包含的过渡组件。