What are Transitions?
A transition is an animation usually used to move content in or out of view. Transitions help to make a UI expressive and easy to use and also MUI provides transitions that can introduce some basic motion to your applications.
React MUI Transitions
The transition component in React MUI allows you to define a change from one component state to another over time. Although it is most commonly used for mounting and unmounting animation components, it can also be used to portray in-place transition stages. It is up to you to give such states meaning and significance.
Components available in React MUI transition
1. Collapse: The “Collapse” component can be used to construct accordions, expanding sections, and also other UI components that require content to be shown and hidden.
Syntax:
<Collapse in={checked} timeout={2000}>
{icon}
</Collapse>
2. Fade: Models, toasts, and other UI components that need to appear and disappear can be created with the “Fade” component. It employs a straightforward fade transition based on CSS opacity, also with the “timeout” prop, you may change the duration and easing of the transition.
Syntax:
<Fade in={checked} timeout={2000}>
{icon}
</Fade>
3. Grow: The “Grow” component can be used to build expandable buttons or objects that must grow and also shrink. It employs a simple scale transition based on CSS transform, and also the duration and easing of the transition may be adjusted using the “timeout” attribute.
Syntax:
<Grow in={checked} timeout={2000}>
{icon}
</Grow>
4. Slide: To design navigation drawers, modals, and other UI that must slide into and out utilise the “Slide” component. It makes use of a straightforward CSS transform-based slide transition and also, you may alter the transition’s direction, length, and ease by using the “direction,” “timeout,” and “easing” props.
Syntax:
<Slide in={checked} direction='left' timeout={2000}>
{icon}
</Slide>
5. Zoom: Modals, popovers, and also other UI that need zooming in and out can be created with the “Zoom” component. It employs a basic CSS transform-based zoom transition, and also you can adjust the transition’s length and easing using the “timeout” attribute.
Syntax:
<Zoom in={checked} timeout={2000}>
{icon}
</Zoom>
CodeSandbox: https://codesandbox.io/s/react-mui-transition-qe7tv1?file=/demo.js
Reference: https://mui.com/material-ui/transitions/
Conclusion
So to apply transition in your code you just have to wrap the transition component with their required props and also can adjust the timeout or direction in your code.
Also, I have provided a CodeSandbox link where you can try and test different things.
For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.
