语义UI反应过渡不动画

Question

我正在尝试使用React Semantic UI的Transition为基于React类的组件的进入和退出设置动画。但它不起作用。见https://codesandbox.io/s/k23z06o43r?fontsize=14。

在片段中，我有3个实验：

1. 使用Transition为类组件的进入和退出设置动画 - 不起作用
2. 与上面相同，但Class组件包含在Transition中的div中 - 按预期工作，但如果可能的话我不想要div。或者至少理解为什么它是必要的。
3. 与1）相同，为Transition设置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

好吧，我自己从来没有使用过这个库，但是看起来语义ui与转换组件内部的客户组件无法正常工作。您可以使用semantic-ui中的Container组件，然后只需将您的客户组件作为子项传递即可。