[Dialog] Looking for a function `onAnimationEnd`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I am using Material-ui Dialog for Modal. It’s work perfectly. I am facing one problem when I am trying to add scrollBarWidth as padding-right to my fixed header component.

When I close the Dialog then it should be set padding-reigh to 0px. But it done before closing the dialog. That’s why I need a onTransitionEnd/onAnimationEnd Or any transition props for detecting animation is finished. Anyone can help me.

This is the trigger function

const handleClickOpen = () => {
        setOpen(true);
        const header = document.querySelector('header');
        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
        header.style.paddingRight = `${scrollBarWidth}px`;
    };

    const handleClose = () => {
        setOpen(false);
        const header = document.querySelector('header');
        header.style.paddingRight = "0px";
        // Here problem is padding-right set 0px before fulfill closing of dialog. That's Why my site is flickering?
    };

<Dialog
     open={open}
     onClose={handleClose}
     scroll="paper"
     keepMounted
     aria-labelledby="scroll-dialog-title"
     aria-describedby="scroll-dialog-description"
     >
         Hello World
</Dialog>

https://mui.com/api/dialog/

[hbjORbj]

Hi.

You can pass the following to Dialog:

TransitionProps={{
    onExited: () => {
    handleClose();
    }
 }}

Here is a working sandbox: https://codesandbox.io/s/laughing-moore-v3diq?file=/Component/Dialog.js:1243-1347

More APIs are described in here. This doc has been already linked next to TransitionProps in our Dialog API docs, so please look more thoroughly before creating a issue.

[siamahnaf198]

Sorry, I didn’t understand it. Thank you very much