语义 UI React Transition 没有动画

Question

我正在尝试使用 React Semantic UI 的 Transition. But it's not working. See https://codesandbox.io/s/k23z06o43r?fontsize=14.

动画化基于 React Class 的组件的进入和退出

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

使用 Transition 为 Class 组件的进入和退出设置动画 - 是否不工作
与上面相同，但 Class 组件包装在 div 中在过渡中 - 按预期工作，但我不想要 div，如果可能的话。或者至少理解为什么它是必要的。
与 1) 相同，为过渡设置了 unMount 属性。 - 不动画 entry/exit，但 mounts/unMounts 组件。

Answer 1

好吧，我自己从未使用过这个库，但似乎语义-ui 不能与转换组件内的客户组件一起正常工作。您可以使用 semantic-ui 中的 Container 组件，然后简单地将您的客户组件作为子组件传递，这样就可以了。

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>
    )
  }
}

已更新 CodeSandbox：https://codesandbox.io/s/8zk6v6wzw8

语义 UI React Transition 没有动画

Semantic UI React Transition not animating

reactjs

semantic-ui-react