Css 淡入&；ReactJS模态窗口中的比例效应

我有一个在ReactJS中编写的模式窗口。我需要实现此模式窗口的淡入缩放效果。类似于（请使用名称淡入缩放查看效果）

我找到了一个实现这种效果的库（请使用名称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;
  }

---

为了实现这一点，您需要向模式添加比例

---

您需要添加一个

transform:scale（0）

到主

div

，这将解决您的问题。

随着

转换增加淡入事务的时间：全部1.3秒