Transitions

These theme helpers allow you to create custom CSS transitions, you can customize the durations, easings and more.

API

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

Arguments

props (string | string[]): Defaults to ['all']. Provides a CSS property, or a list of CSS properties that should be transitioned.
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 theme.transitions.create() helper to create consistent transitions for the elements of your UI.

theme<span class="token punctuation">.</span>transitions<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">,</span> <span class="token string">'transform'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Example

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

Arguments

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.

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">transitions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">shortest</span><span class="token operator">:</span> <span class="token number">150</span><span class="token punctuation">,</span>
      <span class="token literal-property property">shorter</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      <span class="token literal-property property">short</span><span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
      <span class="token comment">// most basic recommended timing</span>
      <span class="token literal-property property">standard</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
      <span class="token comment">// this is to be used in complex animations</span>
      <span class="token literal-property property">complex</span><span class="token operator">:</span> <span class="token number">375</span><span class="token punctuation">,</span>
      <span class="token comment">// recommended when something is entering screen</span>
      <span class="token literal-property property">enteringScreen</span><span class="token operator">:</span> <span class="token number">225</span><span class="token punctuation">,</span>
      <span class="token comment">// recommended when something is leaving screen</span>
      <span class="token literal-property property">leavingScreen</span><span class="token operator">:</span> <span class="token number">195</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Easings

You can change some or all of the easing values, or provide your own, by providing a custom CSS transition-timing-function value.

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

References

Check out the Transitions page to explore the transition components that are included with Material UI.