语义 UI 反应过渡没有动画答案

【问题标题】：Semantic UI React Transition not animating语义 UI 反应过渡没有动画
【发布时间】：2019-08-03 03:09:25
【问题描述】：

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

在 sn-p 中，我进行了 3 个实验：

使用转换动画类组件的进入和退出 - 是否不工作
同上，但 Class 组件被包裹在一个 div 中在过渡内 - 按预期工作，但我不想要 div，如果可能的话。或者至少了解为什么它是必要的。
与 1) 相同，为转换设置了 unMount 属性。 - 不动画进入/退出，但装载/卸载组件。

【问题讨论】：

标签： reactjs semantic-ui-react

【解决方案1】：

好吧，我自己从来没有使用过这个库，但是语义 UI 似乎无法与转换组件内的自定义组件一起正常工作。您可以使用语义 UI 中的 Container 组件，然后只需将您的客户组件作为子组件传入即可。

【讨论】：

【解决方案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

【讨论】：