Transitions

All of the react-md components that have a transition use the useCSSTransition hook to generate simple CSS transitions. If a component uses a CSS transition, it will expose a timeout and classNames prop to customize the transition behavior.

Transition Timeouts

react-md default to animating between 0.15s to 0.2s to ensure that animations only help show the user something is happening instead of blocking behavior. The exception is the CrossFade transition which takes 0.3s by default.

These default timeouts can be configured through the core.$linear-duration, core.$enter-duration, core.$leave-duration, and core.$cross-fade-transition-duration but would also need to be configured on the component level as well.

Transition Timing Functions

There are a few transition-timing-functions available by default and can be configured.

core.$sharp-timing-function - appear quickly
core.$linear-timing-function - enter and exit at the same speed
core.$acceleration-timing-function - start slow, then speed up
core.$deceleration-timing-function - start fast, then slow down

Disabling All Transitions

If all react-md transitions should be disabled, set the TRANSITION_CONFIG.disabled to true and include near the root of your app:

import { TRANSITION_CONFIG } from "@react-md/core/transition/config";

TRANSITION_CONFIG.disabled = true;

See Global Configuration for testing notes.

Default Component Transitions

Collapse

The Collapse, ExpansionPanel, Navigation, and Tree components and useCollapseTransition hook cannot be configured through Sass and instead only through the timeout prop. It defaults to DEFAULT_COLLAPSE_TIMEOUT.

CrossFade

The CrossFade component and useCrossFadeTransition hook use the following defaults and configuration:

Dialog

The Dialog component will animate with opacity and sliding upwards a short distance. It uses the following defaults and configuration:

ScaleTransition

The ScaleTransition, Menu, Autocomplete, Select, and Snackbar components and useScaleTransition hook use . It uses the following defaults and configuration:

Sheet

The Sheet component will slide from outside the viewport and stick to the edge whenever it becomes visible. It uses the following defaults and configuration:

SkeletonPlaceholder

The SkeletonPlaceholder component and useSkeletonPlaceholder hook animate by changing the opacity of the element. It uses the following defaults and configuration:

Slide

The Slide component and useSlideTransition hook animate by sliding from some point to another point using CSS transforms. It uses the following defaults and configuration:

Overlay

The Overlay component uses a simple opacity transition from 0 to 1 whenever it becomes visible and uses the following defaults and configuration: