How to override the transition of drawer?

Question

I have two drawers (left and bottom). When the left drawer opens, I want to increase marginLeft and reduce the width of bottom drawer with transition/animation.

I try to add inline transition style to the paper of drawer. But the style will then replaced by element.style {transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;}

Sample in codesandbox

  <Drawer 
    ...

    classes={{
      paper: classes.transitionIn,
    }}

    ...

    PaperProps = {{
      style:{
        ...

        transition: 'transform 990ms cubic-bezier(0, 0, 0.2, 1) 0ms',
      }
    }}
  >
    {children}
  </Drawer>

Is there any way to add animation to the bottom drawer?

Answer 1

I just find a way to override the root node's transition style by adding a callback function (onEntering) to Drawer's SlideProps.

  <Drawer 
    ...

    classes={{
      paper: classes.transitionIn,
    }}

    ...

    SlideProps = {{
      onEntering: (node, isAppearing)=>{
        node.style.webkitTransition  = theme.transitions.create(['-webkit-transform', 'margin', 'height', 'width', 'top', 'left'], {
          easing: theme.transitions.easing.easeOut,
          duration: transitionTime,
        });

        node.style.transition   = theme.transitions.create(['transform', 'margin', 'height', 'width', 'top', 'left'], {
          easing: theme.transitions.easing.easeOut,
          duration: transitionTime,
        });
      },
    }}

    PaperProps = {{
      style:{
        ...
      }
    }}
  >
    {children}
  </Drawer>