Question

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

在代码段中，我将进行3个实验：

使用“过渡”来动画类组件的进入和退出-是否不起作用
与上述相同，但Class组件包装在div中在“过渡”中-符合预期，但我不希望使用div，如果可能的话。或至少了解其必要性。
与1）相同，并为过渡设置了不固定的道具。 -不动画进入/退出，但安装/取消安装组件。

Answer 1

好吧，我本人从未使用过该库，但似乎语义UI在过渡组件内部的自定义组件上无法正常工作。您可以使用语义UI中的Container组件，然后简单地将您的custome组件作为子组件传入，即可。

Answer 2

您的PackageComponent应该散布未处理的道具并合并样式：

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

更新的代码沙箱：https://codesandbox.io/s/8zk6v6wzw8

语义UI React过渡未设置动画

2 个答案: