Семантический пользовательский интерфейс React Transition не анимирует

Question

Я пытаюсь анимировать вход и выход компонента на основе класса React с помощью пользовательского интерфейса React Semantic Переход .Но это не работает.См. https://codesandbox.io/s/k23z06o43r?fontsize=14.

Во фрагменте у меня есть 3 эксперимента:

1. Использовать переход для анимации входа и выхода компонента класса - не работает
2. То же, что и выше, но компонент Class обернут в div внутри Transition - работает как положено, но я не хочу div, если это возможно.Или хотя бы понять, зачем это нужно.
3. То же, что 1) с unMount prop, установленным для Перехода.- Не анимирует вход / выход, но монтирует / демонтирует компонент.

Answer 1

Ваш PackageComponent должен распространять необработанный реквизит и объединять стили:

class PackageComponent extends React.Component {
  render() {
    return (
      /* Spread below is important */
      <Container {...this.props} style={{ ...styleObj, ...this.props.style }}> 
        {this.props.children}
      </Container>
    )
  }
}

Обновлен CodeSandbox: https://codesandbox.io/s/8zk6v6wzw8

Answer 2

Ну, я сам никогда не использовал эту библиотеку, но кажется, что semantic-ui не работает должным образом с компонентами обычного типа внутри компонента перехода.Вы можете использовать компонент Container из semantic-ui, а затем просто передать свой обычный компонент как дочерний элемент, который работает.