ReactJS 模态窗口中的淡入和缩放效果

我有一个在ReactJS中编写的模态窗口，我需要实现这个模态窗口的缩放淡入淡出效果。像这样的东西(请用名称Fade In & Scale来寻找效果(。

我找到了一个实现效果的库(请使用名称 Zoom 查看效果(，但不是以 React 方式，从 DOM 中动态删除元素。

所以我从头开始写的。但我有一个问题。当模态淡出比例动画工作时，但当它淡入时，它不起作用。

请帮忙。

代码沙盒

我的样式组件样式。

&.fade-in {
    opacity: 1;
    /* transition: opacity linear 0.15s; */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    transition: all 0.3s;
  }
  &.fade-out {
    opacity: 0;
    transition: opacity linear 0.15s;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
  }