React Component通过切换状态淡入淡出过渡？

Question

我有一个关于React Components的愚蠢问题

一个。我可以通过使用State来控制组件创建：

{
  is_active ? (
    <div>...</div>
  ) : null
}

湾我还可以插入不透明度过渡，参考： React fade in element

℃。但我如何组合（a）＆amp; （b）进入    1.当is_active = true时淡入    2.当is_active = false

时淡出

有一种简单的方法吗？

Answer 1

您可以这样做：

{
  is_active ? (
    <div className="fade-in">...</div>
  )
  :
  (
    <div className="fade-out">...</div>
  )
}

Answer 2

如果您只想要根据is_active变量使用的类，那么可以这样做：

<div className={is_active ? 'fade-in' : 'fade-out'}>...</div>

还有classNames package on npm缓解了所有类属性的生成。

如果你希望组件在淡出后卸载，这有点棘手，但你可以找到帮助，例如React Transition Groups或React Motion（最流行的方法，随时找到或创建一个最适合您的需求）