[Modal] Matching exit animation not present when set to true directly

[mitchmaps]

Issue Summary

Related to #1897 which was closed by this PR, when the modal closes, the correct slide down animation is missing when the component is set to true directly using the syntax open && <Modal open={open} />.

Expected behaviour

See the Modal component on the Polaris site.
The modal should perform the correct slide down animation when it's dismissed.

Actual behaviour

Click to view collapsed gif

See this example: https://codesandbox.io/s/ancient-violet-z8te6

The slide down animation isn't happening when the modal is closed so it just disappears instead 😬.

Steps to reproduce the problem

1. Set up a playground which uses the Modal and use the open && <Modal open={open} /> syntax
2. Inspect the lack of animation

Reduced test case

This CodeSandbox template is a great starting point.

Specifications

• Are you using the React components? (Y):
• Polaris version number:
• Browser: Chrome
• Device: Desktop
• Operating System: MacOS 10.14.6

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[Darking360]

Hey @mitchmaps! New here 😅 taking a look into this, I get what you're trying to do, but it seems that it's the way it works. I checked the implementation for the Dialog component, and the transition that it uses comes from the CSSTransition from Material UI here, but maybe the behavior that is wanted here is to take off completely the component when the active or open property is in false, but in this line of the Dialog implementation they set up the property unmountOnExit which takes out of the DOM the component after the exit of the transition, also documented in the documentation for the Material UI transition here since it uses the same from React transition group.

This issue is also in the examples from Material UI, if you play around with this one for Fade example, and you modify it to be:

{
        checked && <Fade in={checked}>
          <Paper elevation={4} className={classes.paper}>
            <svg className={classes.svg}>
              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
            </svg>
          </Paper>
        </Fade>
      }

It'll show the on entering animation, but not the exit since it takes the component before it can handle the animation. Not sure if this can be resolved, but it seems to me that the behavior that the user would want it's already there, maybe update the documentation to warn them to not use open && <Component /> since they'll miss the exit animation 🤔

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.