模态的 react-transition-group 的裸机案例不起作用（codesandbox），为什么？答案

【问题标题】：Bare bone case of react-transition-group for modal that doesn't work (codesandbox), why?模态的 react-transition-group 的裸机案例不起作用（codesandbox），为什么？
【发布时间】：2019-04-12 12:33:11
【问题描述】：

只想用react-transition-group做一个快速的模态弹出动画

当前行为： https://codesandbox.io/s/525zj4vwrk

预期结果： https://codesandbox.io/s/7m9721y03x

类似的代码，但不知何故第一个不起作用？

【问题讨论】：

标签： reactjs react-transition-group

【解决方案1】：

只是缺少一个 unmountOnExit 属性。

<CSSTransition in={show} timeout={300} classNames="alert" unmountOnExit>

工作示例（如果您不喜欢淡出时弹出“模态”下方的按钮，那么像另一个示例一样，使用两组state 和onEnter 和@ 987654327@属性）：

【讨论】：

谢谢。 1. 为什么需要unmountOnExit ？退出时我成像卡的不透明度应该为0。 2. 如果我对卡片应用 opacity: 0 样式，它的闪烁会表现得很奇怪。为什么？
3.老实说，你认为 react-transition-group 仍然是反应动画的首选吗？你是否使用过其他类似 react-spring 的东西？
它需要unmountOnExit 才能将其从DOM 中删除。否则，它总是存在的（因此你得到了闪烁的动画）。我个人不使用动画。虽然它们在屏幕上可能看起来很棒，但它们会占用宝贵的资源并增加不必要的等待时间。大多数 Web 应用程序（如 target、reddit 和 imgur）几乎没有（如果有的话）动画。性能优先于“酷”。