Material UI causing animation to fail to trigger

Question

Material UI causing animation to fail to trigger

After integrating material UI into my existing application, I encountered a peculiar issue. When adding material UI components to modals, the entering animation fails to trigger. Interestingly, downgrading material UI or removing all MUI components resolves the problem, and using any other UI library does not reproduce the issue.

https://codesandbox.io/s/mui-animation-issue-mgph3

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Test from "./Test";

const Overlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10000;
`;

const Modal = styled.div`
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100px;
  height: 100px;
  align-items: center;
  background: white;
`;

const modalsComponentLookupTable = {
  Test
};

const ModalContainer = ({ setModals, children }) => {
  const [modalStyle, setModalStyle] = useState({
    opacity: 0,
    transition: "opacity 2000ms",
    willChange: "opacity",
    transitionTimingFunction: "cubic-bezier(0.165, 0.840, 0.440, 1.000)"
  });
  const [bgStyle, setBgStyle] = useState({
    background: "rgba(0, 0, 0, 1)",
    willChange: "opacity",
    transition: "opacity 2000ms cubic-bezier(0.165, 0.840, 0.440, 1.000)",
    opacity: 0
  });
  const unMountStyle = () => {
    // css for unmount animation
    setModalStyle({
      opacity: 0,
      transition: "opacity 2200ms",
      willChange: "opacity",
      transitionTimingFunction: "cubic-bezier(0.165, 0.840, 0.440, 1.000)"
    });
    setBgStyle({
      background: "rgba(0, 0, 0, 1)",
      willChange: "opacity",
      transition: "opacity 2200ms cubic-bezier(0.165, 0.840, 0.440, 1.000)",
      opacity: 0
    });
  };

  const mountStyle = () => {
    // css for mount animation
    setModalStyle({
      opacity: 1,
      transition: "opacity: 2000ms",
      willChange: "opacity",
      transitionTimingFunction: "cubic-bezier(0.165, 0.840, 0.440, 1.000)"
    });

    setBgStyle({
      willChange: "opacity",
      opacity: 1,
      background: "rgba(0, 0, 0, 1)",
      transition: "opacity 2000ms cubic-bezier(0.165, 0.840, 0.440, 1.000)"
    });
  };

  useEffect(() => {
    mountStyle();
  }, []);

  const back = e => {
    e.stopPropagation();
    unMountStyle();
    setTimeout(() => setModals([]), 2200);
  };

  return (
    <Overlay onClick={back} style={bgStyle}>
      <Modal style={modalStyle}>{children}</Modal>
    </Overlay>
  );
};

const ModalsManager = ({ modals, setModals }) => {
  const renderedModals = modals.map(modalDescription => {
    const ModalComponent = modalsComponentLookupTable[modalDescription];

    return (
      <ModalContainer setModals={setModals}>
        <ModalComponent />
      </ModalContainer>
    );
  });

  return <span>{renderedModals}</span>;
};

export default ModalsManager;

When utilizing MUI components within the Test component, the entering animation does not activate. No error messages appear in the console. It seems that there might be an issue within my code causing this behavior, as the Material-UI team mentioned it's not related to their library according to their response on GitHub: https://github.com/mui-org/material-ui/issues/17888

css reactjs material-ui

Answer 1

Answer №1

After thorough investigation, I am confident that the issue does not lie within Material-UI but rather in the fragility of the approach utilized for your transition animation.

I discovered that simply including a component that immediately re-renders upon mounting (whether in componentDidMount or useLayoutEffect) is enough to disrupt the functionality. This behavior is exhibited by TransitionGroup, which is employed by TouchRipple utilized by ButtonBase, and subsequently used in various Material-UI components like buttons.

The alteration made to your Test component below was responsible for triggering the faulty behavior:

import React from "react";

const RerenderOnMount = () => {
  const [, setMyState] = React.useState(false);
  React.useLayoutEffect(() => {
    setMyState(true);
  }, []);
  return null;
};
const Test = () => {
  return (
    <div
      css={`
        height: 100px;
        width: 100px;
        z-index: 5;
      `}
      onClick={e => e.stopPropagation()}
    >
      <div>
        Test
        <RerenderOnMount />
      </div>
    </div>
  );
};

export default Test;

In the example above that replicates the issue, no Material-UI components are involved.

It appears that the re-rendering of the child component impacts the timing at which the browser attempts to render the modal initially, leading the browser to overlook any transitions when mountStyle is called. This results in the same output as if the "mount" styles were applied directly, without acknowledging the transition from default styles to mount styles. To address this timing intricacy in React and ensure proper transitions, it is advisable to utilize react-transition-group as commonly done in Material-UI.

To temporarily resolve the issue, I managed to make your code work by invoking mountStyle using setTimeout within useEffect. However, this workaround may pose potential issues in different scenarios or browsers. Hence, I recommend revisiting the transition implementation to allow react-transition-group to handle the entering/exiting states efficiently. Here's the modified version with my setTimeout hack: https://codesandbox.io/s/mui-animation-issue-505rj.

Answer 2

After thorough investigation, I am confident that the issue does not lie within Material-UI but rather in the fragility of the approach utilized for your transition animation.

I discovered that simply including a component that immediately re-renders upon mounting (whether in componentDidMount or useLayoutEffect) is enough to disrupt the functionality. This behavior is exhibited by TransitionGroup, which is employed by TouchRipple utilized by ButtonBase, and subsequently used in various Material-UI components like buttons.

The alteration made to your Test component below was responsible for triggering the faulty behavior:

import React from "react";

const RerenderOnMount = () => {
  const [, setMyState] = React.useState(false);
  React.useLayoutEffect(() => {
    setMyState(true);
  }, []);
  return null;
};
const Test = () => {
  return (
    <div
      css={`
        height: 100px;
        width: 100px;
        z-index: 5;
      `}
      onClick={e => e.stopPropagation()}
    >
      <div>
        Test
        <RerenderOnMount />
      </div>
    </div>
  );
};

export default Test;

In the example above that replicates the issue, no Material-UI components are involved.

It appears that the re-rendering of the child component impacts the timing at which the browser attempts to render the modal initially, leading the browser to overlook any transitions when mountStyle is called. This results in the same output as if the "mount" styles were applied directly, without acknowledging the transition from default styles to mount styles. To address this timing intricacy in React and ensure proper transitions, it is advisable to utilize react-transition-group as commonly done in Material-UI.

To temporarily resolve the issue, I managed to make your code work by invoking mountStyle using setTimeout within useEffect. However, this workaround may pose potential issues in different scenarios or browsers. Hence, I recommend revisiting the transition implementation to allow react-transition-group to handle the entering/exiting states efficiently. Here's the modified version with my setTimeout hack: https://codesandbox.io/s/mui-animation-issue-505rj.

Material UI causing animation to fail to trigger

Answer №1

Similar questions

Grayscale to color image slider using JQuery, HTML, and CSS

The hydration process encountered an error due to a discrepancy between the initial UI and the server-rendered content, specifically within the Next.js Tanstack table

Ways to ensure all tabs on the Nav bar are evenly distributed across the width of the screen

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

Passing data from React Native to an Android activity: Tips and tricks

Cached images do not trigger the OnLoad event

Refresh meta tags in a Next.js/React app

Issue with implementing LocomotiveScroll on a sticky element

Tips on sending various properties to makeStyles() using TypeScript

Having trouble figuring out what is causing non-serializable error in Redux (Redux error)

npm encountered an error: EPERM - Unable to perform the operation 'RENAME' due to insufficient permissions

The number I clicked is not displaying on the screen in my React project

Importing vs Referencing Videos in Next.js - What is the Best Practice for Video Integration in Next.js?

Issues arising from the arrangement of the menu bar

What is preventing useEffect from accessing my state variable within a return statement?

To replace basic SVG icons upon clicking with the use of HTML, CSS, and jQuery - here's how!

When attempting to launch the development server using 'npm start', an error is encountered preventing the server from starting

What is preventing the input box from shrinking further?

My code gets disrupted when I switch between ids and classes

InitAuth0 Auth0 encountering deepPartial error in Next.js with TypeScript setup