Transitions

Transition components are utilities that let you add motion to components.

CssAnimation API

import { CssAnimation } from '@mui/base/Transitions';
// or
import { CssAnimation } from '@mui/base';

Props of the native component are also available.

Name	Type	Default	Description
enterAnimationName	string	-	The name of the CSS animation (the `animation-name` CSS property) applied to the component when the transition is requested to enter.
enterClassName	string	-	The name of the CSS class applied to the component when the transition is requested to enter.
exitAnimationName	string	-	The name of the CSS animation (the `animation-name` CSS property) applied to the component when the transition is requested to exit.
exitClassName	string	-	The name of the CSS class applied to the component when the transition is requested to exit.

The component cannot hold a ref.

import { CssTransition } from '@mui/base/Transitions';
// or
import { CssTransition } from '@mui/base';

Props of the native component are also available.

Name	Type	Default	Description
enterClassName	string	-	The name of the CSS class applied to the component when the transition is requested to enter.
exitClassName	string	-	The name of the CSS class applied to the component when the transition is requested to exit.
lastTransitionedPropertyOnExit	string	-	The name of the CSS property that is transitioned the longest (has the largest `transition-duration`) on exit. This is used to determine when the transition has ended. If not specified, the transition will be considered finished end when the first property is transitioned. If all properties have the same `transition-duration` (or there is just one transitioned property), this can be omitted.

The component cannot hold a ref.