CODEWITHSUNDEEP
reactjsmaterial-ui
Bruce
Bruce

Reputation: 83

Mui Drawer animation

I am using Mui drawer for a company project, it's using a variant drawer. The open and close for the drawer is instanuously and I want it to be able to slowly shift in and out.

The drawer's props and how we use it is fairly simple.

<Drawer variant="persistent" {...drawerProps}>

and the props is

const drawerProps = {
    className: "staff-drawer",
    open,
    onClose
};

There're no CSS or any thing controlling the enter or exit transaction. I have tried to give it a transactrionDuration="1000ms" property, and it doesn't seems to add any transition effect.

Thanks for reading all the way to here, any thoughts or comments would be appreciated.

Upvotes: 0

Views: 3549

Answers (1)

Bruce
Bruce

Reputation: 83

Found in the code base having logic that if the drawer's open prop is false, it will return null. This results the instanuous disappear of the drawer.

if (!drawerProps.open) {
    return null;
}

removed this, and it behaved correctly

Upvotes: 1

Related Questions