005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
91 lines
3.0 KiB
Markdown
91 lines
3.0 KiB
Markdown
# Transitions
|
||
|
||
<p class="description">These theme helpers allow you to create custom CSS transitions, you can customize the durations, easings and more.</p>
|
||
|
||
## API
|
||
|
||
### `theme.transitions.create(props, options) => transition`
|
||
|
||
#### Arguments
|
||
|
||
1. `props` (_string_ | _string[]_): Defaults to `['all']`. Provides a CSS property, or a list of CSS properties that should be transitioned.
|
||
2. `options` (_object_ [optional]):
|
||
|
||
- `options.duration` (_string_ | _number_ [optional]): Defaults to `theme.transitions.duration.standard`. Provides the duration of the transition.
|
||
- `options.easing` (_string_ [optional]): Defaults to `theme.transitions.easing.easeInOut`. Provides the easing for the transition.
|
||
- `options.delay` (_string_ | _number_ [optional]): Defaults to `0`. Provides the delay for the transition.
|
||
|
||
#### Returns
|
||
|
||
`transition`: A CSS transition value, which composes all CSS properties that should be transitioned, together with the defined duration, easing and delay.
|
||
|
||
Use the <code>theme.transitions.create()</code> helper to create consistent transitions for the elements of your UI.</p>
|
||
|
||
```js
|
||
theme.transitions.create(['background-color', 'transform']);
|
||
```
|
||
|
||
#### Example
|
||
|
||
{{"demo": "TransitionHover.js", "defaultCodeOpen": false}}
|
||
|
||
### `theme.transitions.getAutoHeightDuration(height) => duration`
|
||
|
||
#### Arguments
|
||
|
||
1. `height` (_number_): The height of the component.
|
||
|
||
#### Returns
|
||
|
||
`duration`: The calculated duration based on the height.
|
||
|
||
## Durations
|
||
|
||
You can change some or all of the duration values, or provide your own (for use in the `create()` helper). This example shows all the default values (in milliseconds), but you only need to provide the keys you wish to change or add.
|
||
|
||
```js
|
||
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,
|
||
},
|
||
},
|
||
});
|
||
```
|
||
|
||
## Easings
|
||
|
||
You can change some or all of the easing values, or provide your own, by providing a custom CSS <code>transition-timing-function</code> value.
|
||
|
||
```js
|
||
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)',
|
||
},
|
||
},
|
||
});
|
||
```
|
||
|
||
## References
|
||
|
||
Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with Material UI.
|