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

Paraffinic

Link doesn't work – Hoofer

Hmm, thanks for letting me know. Try this. codesandbox.io/embed/w36rxmvp8 – Paraffinic

What exactly problem did you mean? Black background during the animation? – Hoofer

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. – Paraffinic

What do you mean @RicardoCosta ? The animation in my example is using the default MUI CSS animations. – Paraffinic

Answer 1

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; }}
>

Paraffinic

Answer 2

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)

Sungsungari