Fix Material-UI Right Side Persistent Drawer Animation

Question

I have a fairly complex application with multiple drawers. I'm having an issue with the right side drawer animations. The drawers themselves animate fine, but the parent divs do not. I tried applying the same animation for the drawer to the parent div and this did not solve my problem. I've replicated the issue in CodeSandbox. See below.

Example

Hmm, thanks for letting me know. Try this. https://codesandbox.io/embed/w36rxmvp8 — Seth Duncan, Jul 27 '18 at 20:25
What exactly problem did you mean? Black background during the animation? — john c. j., Jul 27 '18 at 20:29
Yep. In our application, the Canvas is a 2d/3d workspace and the parent div snaps to full-width while the drawer animates in. My current workaround is to make the parent div's background color the same as the Canvas' bg color. — Seth Duncan, Jul 27 '18 at 20:41
What do you mean @RicardoCosta ? The animation in my example is using the default MUI CSS animations. — Seth Duncan, Sep 04 '18 at 16:36

score 3 · Accepted Answer · answered Oct 26 '18 at 20:52

Our specific use case is fairly complicated, but I think we've managed to find a fix. Essentially, we had to apply a transition to the <main> element and set its margin based on the state of the right toolbar. See below.

main: {
    position: 'relative',
    flex: 1,
    height: '100%',
    overflow: 'hidden',
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginRight: -500,
  },
  mainRightOpen: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    marginRight: 0,
  }

and implemented like so...

<main
  className={`${classes.main}
    ${this.props.rightToolBarOpen ? classes.mainRightOpen : null}
   `}
  ref={(mainContent) => { this.mainContent = mainContent; }}
>

score 0 · Answer 2 · answered Jul 19 '21 at 23:09

Also, if you don't want the fixed margin value, you may consider to use percentage for the margin control, for instance:

// define the drawerWidth

const drawerWidth = 33.33333;

// put margin value as a string format like below: 

content: {
  flexGrow: 1,
  padding: theme.spacing(6),
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  marginRight: `${-drawerWidth}%`,
},
contentShift: {
  transition: theme.transitions.create('margin', {
    easing: theme.transitions.easing.easeOut,
    duration: theme.transitions.duration.enteringScreen,
  }),
  marginRight: 0,
},

Above solution works form me (Material-UI version I am using: v4.12.1)

Fix Material-UI Right Side Persistent Drawer Animation

2 Answers2