javascript - How to animate React Modal?

Question

I am working on a sharetribe template and I hava a react Modal that I want to animate, but it doesn't work and I don't know why. What I did to try so solve this is adding closeTimeoutMS={500} to the <Modal /> and the .ReactModal__... styles in CSS. I will leave the code below. Hope someone can help me.

import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Modal } from '../../components';
import { withViewport } from '../../util/contextHelpers';
import css from './ModalInMobile.module.css';

class ModalInMobileComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
    this.handleClose = this.handleClose.bind(this);
    this.changeOpenStatus = this.changeOpenStatus.bind(this);
  }

// not relevant code was here //

// We have 3 view states:
    // - default desktop layout (just an extra wrapper)
    // - mobile layout: content visible inside modal popup
    // - mobile layout: content hidden
    const closedClassName = isClosedInMobile ? css.modalHidden : null;
    const classes = classNames({ [css.modalInMobile]: isOpenInMobile }, css.root, className);

    return (
      <Modal
        className={classes}
        containerClassName={containerClassName || css.modalContainer}
        contentClassName={css.modalContent}
        id={id}
        isOpen={isOpen}
        isClosedClassName={closedClassName}
        onClose={this.handleClose}
        closeButtonMessage={closeButtonMessage}
        onManageDisableScrolling={onManageDisableScrolling}
        closeTimeoutMS={500}
      >
        {children}
      </Modal>
    );
  }
}

.ReactModal__Overlay {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 500ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
  transform: translateX(0px);
}

.ReactModal__Overlay--before-close {
  opacity: 0;
  transform: translateX(-100px);
}

Answer 1

等待大神答复