title: Animation not triggering when using material UI
body: <p>I encountered an issue when adding material UI to my already existing application. Basically what's happening is that when I add material UI components to my modals, the entering animation of the modal does not trigger. Downgrading material UI to 1.0.0 or removing all MUI components solves the issue. Also, using any other UI library does not cause this issue.</p>
  
  <p><a href="https://codesandbox.io/s/mui-animation-issue-mgph3" rel="nofollow noreferrer">https://codesandbox.io/s/mui-animation-issue-mgph3</a></p>
  
  <pre class="lang-js prettyprint-override"><code>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 }) =&gt; {
    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 = () =&gt; {
      // 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 = () =&gt; {
      // 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(() =&gt; {
      mountStyle();
    }, []);
  
    const back = e =&gt; {
      e.stopPropagation();
      unMountStyle();
      setTimeout(() =&gt; setModals([]), 2200);
    };
  
    return (
      &lt;Overlay onClick={back} style={bgStyle}&gt;
        &lt;Modal style={modalStyle}&gt;{children}&lt;/Modal&gt;
      &lt;/Overlay&gt;
    );
  };
  
  const ModalsManager = ({ modals, setModals }) =&gt; {
    const renderedModals = modals.map(modalDescription =&gt; {
      const ModalComponent = modalsComponentLookupTable[modalDescription];
  
      return (
        &lt;ModalContainer setModals={setModals}&gt;
          &lt;ModalComponent /&gt;
        &lt;/ModalContainer&gt;
      );
    });
  
    return &lt;span&gt;{renderedModals}&lt;/span&gt;;
  };
  
  export default ModalsManager;
  </code></pre>
  
  <p>When the <code>Test</code> component contains any kind of MUI components, the entering animation doesn't trigger. No error in the console.
  Apparently it's something in my code that does trigger this issue since I already opened an issue on their github and they said it's not an issue with their library: <a href="https://github.com/mui-org/material-ui/issues/17888" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/issues/17888</a></p>