How to make modal close animation?

Question

React

Hello, I ran into a problem that I don’t know how to make the modal close animation

const Modal = props => {
    const modal = (
        <div
            className={classnames("modal", "visible", "fadeIn")}
            onClick={() => props.setModalHidden()}
        >
            <div
                className={classnames("modal__window", "zoomIn")}
                style={{ backgroundColor: props.currentBackgroundColor }}
            >
                <p
                    onClick={() => props.setModalHidden()}
                    className="modal__close"
                >
                    &#10006;
                </p>
                <p style={{ color: props.currentTextColor }}>
                    Текущий цвет фона: {props.currentBackgroundColor}
                </p>
            </div>
        </div>
    );

    return props.isModalOpened ? modal : <></>;
};

есть вот такой код. При клике на кнопку окно открывается и срабатывают написанные анимации. А как можно доработать код так, чтобы окно сперва становилось прозрачным, а затем исчезало?

Answer 1

const fadeoutModal = () => {
  // через useState или еще как-то убираем класс visible
  // чтобы произошла анимация

  // когда анимация закончится, тогда убираем модал в родительском компоненте
  setTimeout( props.setModalHidden, 300 )
}

.....


<div
            className={classnames("modal", "visible", "fadeIn")}
            onClick={fadeoutModal}
        >