Как добавить анимацию для модального окна в react?

Question

[Alexander]

Здравствуйте, подскажите как добавить анимацию появления и затухания как модального окна так и overlay в react при использовании createPortal?
Буду благодарен за помощь

const Modal: React.FC<IModal> = ({ open, onClose, children, title }) => {
  if (!open) return null
  return ReactDOM.createPortal(
    <ModalOverlay>
      <StyledModal>
        <div onClick={onClose}>X</div>
        {children}
      </StyledModal>
    </ModalOverlay>,
    document.getElementById('modal-root')
  )
}

Answer 1

[Alexandroppolus]

https://reactcommunity.org/react-transition-group/

Простая библиотека переходов, легко сочетаемая с css анимацией.
В частности, хорошо подойдет для твоего кейса с модалкой: тут как раз 4 пункта - монтирование, анимация до видимого состояния, анимация до невидимого состояния, размонтирование.

Answer 2

[weissdev]

Если не хочешь заморачиваться, попробуй использовать какую-нибудь библиотеку, например
React-animations . Вот использование на русском