axrising
@axrising

Как сохранить анимацию затухания модального окна ReactJS?

Как я могу сохранить анимацию затухания модального окна, если проверка очень необходима, но без нее все отлично работает?
export const ModalBlock: React.FC<ModalBlockProps> = ({
  title,
  onClose,
  isOpen = false,
  children,
}: ModalBlockProps): React.ReactElement | null => {
  if (!isOpen) {
    return null
  }
  return (
    <Dialog TransitionComponent={Transition} open={isOpen} aria-labelledby='form-dialog-title'>
      <DialogTitle id='form-dialog-title'>
        <IconButton onClick={onClose} color='secondary' aria-label='close'>
          <CloseIcon style={{ fontSize: 26 }} color='secondary' />
        </IconButton>
        {title}
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>
  )
}
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
Seasle
@Seasle
\( ゚ヮ゚)/
export const ModalBlock: React.FC<ModalBlockProps> = ({
  title,
  onClose,
  isOpen = false,
  children,
}: ModalBlockProps): React.ReactElement | null => {
  const [closing, setClosing] = useState(false);
  const handleClose = () => setClosing(true);
  
  useEffect(() => {
    if (isOpen) {
      setClosing(false);
    }
  }, [isOpen]);

  if (!isOpen) {
    return null;
  }

  return (
    <Dialog TransitionComponent={Transition} open={!closing && isOpen} onExited={onClose} aria-labelledby='form-dialog-title'>
      <DialogTitle id='form-dialog-title'>
        <IconButton onClick={handleClose} color='secondary' aria-label='close'>
          <CloseIcon style={{ fontSize: 26 }} color='secondary' />
        </IconButton>
        {title}
      </DialogTitle>
      <DialogContent>{children}</DialogContent>
    </Dialog>
  );
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы