Transition does not work with custom class names in CSS modules

[realmayus]

Summary:

The transition does not work when using a custom class name on the modal and when using CSS modules

<ReactModal
       isOpen={isOpened}
       contentLabel={"Add Playlist"}
       onRequestClose={props.onClose}
       className={styles.modal}
       overlayClassName={styles.modalOverlay}
       closeTimeoutMS={200}
>
     <p>Content</p>
</ReactModal>

.modalOverlay
  position: fixed
  top: 60px
  left: 0
  right: 0
  bottom: 0
  background-color: rgba(0, 0, 0, .80)
  opacity: 0
  transition: opacity 2000ms ease-in-out
  &--after-open
    opacity: 1
  &--before-close
    opacity: 0

Codesandbox: https://codesandbox.io/s/agitated-sanne-vbxhb

[chris-pearce]

I'm experiencing this one too.

[vithushan19]

I'm also not able get transitions working because of this.

[tilt-me]

As stated in the documentation for styling via css classes, if you need to style opening and closing animations, you should use an object for className and/or overlayClassName:

You can use the className and overlayClassName props to control the CSS classes that are applied to the modal content and the overlay, respectively. Each of these props may be a single string containing the class name to apply to the component. Alternatively, you may pass an object with the base, afterOpen and beforeClose keys, where the value corresponding to each key is a class name. The base class will always be applied to the component, the afterOpen class will be applied after the modal has been opened and the beforeClose class will be applied after the modal has requested to be closed (e.g. when the user presses the escape key or clicks on the overlay).

Remember to use the closeTimeoutMS prop, too:

Please note that the beforeClose class will have no effect unless the closeTimeoutMS prop is set to a non-zero value, since otherwise the modal will be closed immediately when requested. Thus, if you are using the afterOpen and beforeClose classes to provide transitions, you may want to set closeTimeoutMS to the length (in milliseconds) of your closing transition.

Here is a sample for both classes:

<Modal
    overlayClassName={{
        base: styles.modalOverlay,
        afterOpen: styles.modalOverlayAfterOpen,
        beforeClose: styles.modalOverlayBeforeClose,
    }}
    className={{
        base: styles.modalContent,
        afterOpen: styles.modalContentAfterOpen,
        beforeClose: styles.modalContentBeforeClose,
    }}
    closeTimeoutMS={300}// milliseconds to wait before closing the modal: for the closing transition to work, should be the same value as set in css (if not set, only opening transition will work)
    isOpen={isModalOpen}
>
    <p>Content</p>
</Modal>

Hope this can help, bye!