React MUI Transitions Util

React MUI transition component enables you to define a change from one component state to another across time. Although it’s most frequently used for animation component mounting and unmounting, it can also be utilized to depict in-place transition states. It’s up to you to give those states purpose and impact. 

Components available in React MUI transition:

• Collapse: The “Collapse” component can be used to create accordions, expanding sections, and other UI elements that need to show and hide content. 
• Fade: The “Fade” component can be used to create models, toasts, and other UI elements that need to appear and disappear with a fade effect. It uses a simple fade transition based on CSS opacity, and you can customize the duration and easing of the transition using the “timeout” prop. 
• Grow:  The “Grow” component can be used to create buttons that expand or elements that need to grow and shrink. It uses a simple scale transition based on CSS transform, and you can customize the duration and easing of the transition using the “timeout” prop.
• Slide: The “Slide” component can be used to create navigation drawers, modals, and other UI elements that need to slide in and out of view. It uses a simple slide transition based on CSS transform, and you can customize the direction, duration, and easing of the transition using the “direction”, “timeout” and “easing” props.
• Zoom: The “Zoom” component can be used to create modals, popovers, and other UI elements that need to zoom in and out. It uses a simple zoom transition based on CSS transform, and you can customize the duration and easing of the transition using the “timeout” prop.   
• Child requirement: The child element should include all the content that needs to be transitioned, and the “Transition” component will handle the animation of that content. It’s important to know that the child element passed must be a direct child of the Transition component.
• TransitionGroup:  The “TransitionGroup” component takes a single child element, which should be a set of “Transition” components. It then manages the “in” prop of each “Transition” component and ensures that the animations are synchronized and perform correctly.
• TransitionComponent prop: The “TransitionComponent” prop takes a component class or a function component as its value. The component class should be a valid React component that implements a similar API to the built-in “Transition” component, such as an “in” prop and a “timeout” prop. 
• Performance & SEO:
  • Performance: Animations can have a significant impact on the performance of a web page, especially if they are not implemented correctly. When using the “Transition” component, it’s important to ensure that the animations are smooth and do not cause the page to become unresponsive or slow. 
  • SEO: Search engine crawlers are not able to process JavaScript-based animations, so they may not be able to properly index the content of a page that uses them. This means that if the main content of a page is hidden behind an animation, it may not be properly indexed by search engines. 
• APIs: The Material-UI library provides several APIs for working with “Transition” components (such as “Fade”, “Grow”, “Slide”, “Collapse” and “Zoom”).

Syntax:

<Collapse in={ checked } />

First of all, we will start with creating a React app in VS Code.

Step 1: Create React app by writing the below code in any command line.

npx create-react-app app_name

Step 2: Then, we have to move into the folder we will be working on.

cd project_name

Step 3: We will be installing the @mui/material library for working on our project.

npm install @mui/material @emotion/react @emotion/styled

Project Structure: After creating React App and installing all the dependencies, the folder structure will look similar to the figure given below.

Folder Structure

Steps to run the application: Write the below code in the terminal to run the server:

npm start

Example 1: Below is the code for the Transition component with the Fade and Collapse effect.

Javascript

import React, { useState } from 'react';
import { Box, Collapse, Fade, Button } from '@mui/material';

const Transition = () => {
    const [fade, setFade] = useState(false);
    const [collapse, setCollapse] = useState(false);
    const logo =
'https://media.geeksforgeeks.org/wp-content/uploads/20230104121959/logo.jpg';
    const handleFade = () => {
        setFade((fade) => !fade);
    }

    const handleCollapse = () => {
        setCollapse((collapse) => !collapse);
    }

    return (
        <Box sx={{
            boxShadow: 2, margin: '20px', height: '300px',
            display: 'flex', width: '425px',
            justifyContent: 'center'
        }}>
            <div style={{
                display: 'flex',
                flexDirection: 'column', alignItems: 'center'
            }}>
                <Fade in={fade}>
                    <img src={logo} alt='' width='200px'
                        height='200px' />
                </Fade>
                <Button variant='contained' color='error'
                    sx={{ width: '150px', alignItems: 'center' }}
                    onClick={handleFade}>fade Me</Button>
            </div>
            <div style={{
                display: 'flex', flexDirection: 'column',
                alignItems: 'center'
            }}>
                <Collapse in={collapse}>
                    <img src={logo} alt='' width='200px'
                        height='200px' />
                </Collapse>
                <Button variant='contained'
                    color='error' sx={{
                        width: '150px',
                        position: 'fixed', marginTop: '200px'
                    }}
                    onClick={handleCollapse}>Collapse Me</Button>
            </div>
        </Box>
    );
}

export default Transition;

Output:

Transitions with fade and collapse

Example 2: Below is the code for the Transition component with Grow, Slide, and Zoom effects.

Javascript

import React, { useState } from 'react';
import { Box, Grow, Slide, Zoom, Button } from '@mui/material';

const Transition = () => {
    const [grow, setGrow] = useState(false);
    const [slide, setSlide] = useState(false);
    const [zoom, setZoom] = useState(false);
    const logo =
'https://media.geeksforgeeks.org/wp-content/uploads/20230104121959/logo.jpg';
    const handleGrow = () => {
        setGrow((grow) => !grow);
    }

    const handleSlide = () => {
        setSlide((slide) => !slide);
    }

    const handleZoom = () => {
        setZoom((zoom) => !zoom);
    }

    return (
        <Box sx={{ boxShadow: 2, margin: '20px', height: '300px',
            display: 'flex', width: '700px',
            justifyContent: 'center' }}>
            <div style={{ display: 'flex',
                flexDirection: 'column',
                alignItems: 'center' }}>
                <Grow in={grow}>
                    <img src={logo} alt='' width='200px'
                        height='200px' />
                </Grow>
                <Button variant='contained' color='error'
                    sx={{ width: '150px', alignItems: 'center' }}
                    onClick={handleGrow}>grow Me</Button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column',
                alignItems: 'center' }}>
                <Slide in={slide}>
                    <img src={logo} alt=''
                        width='200px' height='200px' />
                </Slide>
                <Button variant='contained' color='error'
                    sx={{ width: '150px', position: 'fixed',
                    marginTop: '200px' }}
                    onClick={handleSlide}>slide Me</Button>
            </div>
            <div style={{ display: 'flex',
                flexDirection: 'column', alignItems: 'center' }}>
                <Zoom in={zoom}>
                    <img src={logo} alt=''
                        width='200px' height='200px' />
                </Zoom>
                <Button variant='contained' color='error'
                    sx={{ width: '150px', position: 'fixed',
                    marginTop: '200px' }} onClick={handleZoom}>
                        Zoom Me
                </Button>
            </div>
        </Box>
    );
}

export default Transition;

Output:

Transitions with grow, slide and zoom

Reference: https://mui.com/material-ui/transitions/