Почему React-Semantic-UI Transition не анимирует компонент?

У меня есть компонент, который является предупреждением Modal. Для анимации модального окна я использую Transition из semantic-ui-react. Но работает только несколько анимаций (pulse,bounce, flash), и то только при монтировании компонента, и не работает, пока я закрываю Modal. Также не работает свойство duration.

class Alert extends React.Component {
  state = {
    open: true
  };

  close = () => {
    this.setState({
      open: false
    });
  };

  render() {
    const { open } = this.state;
    return (
      <Transition animation = "fade" duration = {1000} visible = {open}>
        <Modal
          size = "mini"
          closeOnDimmerClick = {false}
          closeOnEscape = {false}
          open = {this.state.open}
          onClose = {this.close}>

          <Modal.Content>
            <p>
              Hello user
            </p>
          </Modal.Content>
          <Modal.Actions>
            <Button color = "blue" onClick = {this.close}>
              Ok
            </Button>
          </Modal.Actions>
        </Modal>
      </Transition>
    );
  }
}

Почему такое странное поведение? Что я делаю неправильно?

reactjs semantic-ui-react react-transition-group

08.03.2019 13:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

2 795

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Modal размонтируется задолго до того, как Transition сможет его анимировать, один из способов — позволить Transition размонтировать модальное окно:

class Alert extends React.Component {
  state = {
    open: true
  };

  close = () => {
    this.setState({
      open: false
    });
  };

  render() {
    const { open } = this.state;
    return (
      <Transition
        animation = "fade"
        duration = {1000}
        unmountOnHide = {true}
        visible = {open}
      >
        <Modal
          size = "mini"
          closeOnDimmerClick = {false}
          closeOnEscape = {false}
          open = {true}
          onClose = {this.close}
        >
          <Modal.Content>
            <p>Hello user</p>
          </Modal.Content>
          <Modal.Actions>
            <Button color = "blue" onClick = {this.close}>
              Ok
            </Button>
          </Modal.Actions>
        </Modal>
      </Transition>
    );
  }
}

Edit Alert

Я надеюсь, что это помогает!

Да, это сработало. Но компонент никогда не размонтируется. Я ставлю componentWillUnmount, и он никогда не вызывается. Не могли бы вы попробовать это.

— 08.03.2019 15:49

Alert компонент не будет размонтирован, Modal будет размонтирован, Transition компонент должен быть смонтирован, чтобы он мог применять переходы своих дочерних элементов. Что вы хотите сделать, вам нужно выполнить какую-то логику после закрытия модального окна? Вы можете просто использовать метод close, который вы уже определили в компоненте.

— 08.03.2019 16:03

Компонент IAlert будет использоваться приложением из любого места. Можно ли оставить его в DOM, а монтировать/размонтировать только Modal?

— 08.03.2019 17:09

Ничего страшного. На самом деле, компонент Transition монтирует только свои дочерние элементы в DOM, переопределяя их className для добавления переходных классов css; ничего не будет в фактическом DOM, если у него нет детей. Изучите пример, который я приложил к ответу, вы увидите его сами.

— 08.03.2019 17:53

08.03.2019 13:41