[Modal] Exit Transitions Being Cut Off

[antiwebbite]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Modal should have smooth transitions on open and close or give users the ability to add them.

Current Behavior

Currently in your Modal example, there is a short transition in and when closing a modal the content pops off the screen. Your standard transitions for the backdrop are being cut off as well, as I'm assuming the modal is killing itself before transitions finish.

Looking at your implementation, I could be reading it incorrectly, but it looks like it is supposed to handle transitions before "exited" state.

The dialog component appears to not have these issues.

Steps to Reproduce (for bugs)

1. Visit Modal example
2. Open modal and notice there is a short transition for opacity.
3. Close the modal and notice all content pops off instead of transitioning.

Context

It is important for us to have a smooth experience for our users so that it is pleasant to use the site and tools. We do everything we can to avoid harsh transitions.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.27
React	15.6.1
browser	Chrome Version 64.0.3282.167 (Official Build) (64-bit)

[oliviertassinari]

@antiwebbite Before answering this issue. Are you using the Modal over the Dialog component on purpose?

[antiwebbite]

Yes, this will display custom information that doesn't fit within the standard template set up in the dialog component. (i.e. Title section, Content section, Actions section)

That being said, I think I can use the Dialog component and then add styling to undo it's template and add my features like an X in the corner to get this to work, but I figured we had a Modal component for a reason and it's for the situation I am in.

[antiwebbite]

As a side note, I have attempted to use Dialog and it seems way more polished and farther along, so I should be able to make it work for my purposes with a bit of customization. Even still, I felt it was worth reporting/inquiring about modal transitions for the future or other users!

[oliviertassinari]

The dialog component appears to not have these issues.

You are right. The relevant piece of logic is:
https://github.com/mui-org/material-ui/blob/218c6c23c726d8f4b014834eaa850438eb5b0e87/src/Modal/Modal.js#L67-L70
It doesn't wait for the Backdrop transition to complete to close the modal. It only waits for the children transition if provided.

In a future version, I want to expose a version of the modal free of the withStyles() dependency (and the +20kb gzipped CSS-in-JSS runtime overhead that comes with it #6218). This will also mean that this modal variation won't have the backdrop baked in (hideBackdrop={true}).

So you have two options:

• go up with using the Dialog component or providing a custom transition component.
• go down by implementing your own backdrop with hideBackdrop={true}.