Reactjs анимация при увольнении модал

Question

Я создал модальный компонент, который исчезает с анимацией, но я не знаю, как создать ту же (в обратном порядке) анимацию затухания при отклонении модала.

Модал отображается, когдасвязанное состояние изменяется, и затем модал отображается с его потомками:

{this.state.showModal && (
    <Modal>
        <p>this is the content of the modal</p>
    </Modal>
)}

Анимация модала при исчезновении (CSS):

.Modal {
    animation: animModal 400ms ease-in-out;
    opacity: 0;
    animation-fill-mode: forwards;
  }

  @keyframes animModal {
    0% {
      transform: translate(-400%, -50%);
      opacity: 0;
    }
    100% {
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  }

Но когда модалуволен, конечно, нет анимации.

Одним из решений было бы визуализировать модал всегда, но сделать его видимым только в определенных ситуациях:

const modal = (props) => (
        <Auxiliery>
            <div className={classes.Modal} 
            style={{transform: props.show ? 'translate(-50%, -50%)' : 'translate(-400%, -50%)', opacity: props.show ? '1' : '0'}}>
                {props.children}
            </div>
        </Auxiliery>
)

И в компоненте, который показываетмодал:

<Modal show={this.state.showModal}>
    <p>content of the modal</p>
</Modal>

Таким образом, модал всегда здесь и просто прячется.Но моя проблема с этим подходом состоит в том, что модал всегда визуализируется, и иногда содержимое, которое я помещаю в него, может быть большим, поэтому затрагивается весь смысл рендеринга компонентов только при необходимости.

Что бы вы сделали?

Заранее спасибо