Javascript 如何设置反应模态的动画？

我正在制作一个sharetribe模板，我有一个react模式，我想制作它的动画，但它不起作用，我也不知道为什么。我试图解决这个问题的方法是将

closeTimeoutMS={500}

添加到CSS中的

和

.ReactModal\uuuuu…

样式中。我将在下面留下代码。希望有人能帮助我

从“classNames”导入类名；
从“道具类型”导入道具类型；
从“React”导入React，{Component}；
从“../../components”导入{Modal}；
从“../../util/contextHelpers”导入{withViewport}；
从“/ModalInMobile.module.css”导入css；
类ModalInMobileComponent扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错，
};
this.handleClose=this.handleClose.bind（this）；
this.changeOpenStatus=this.changeOpenStatus.bind（this）；
}
//这里没有相关代码//
//我们有3个视图状态：
//-默认桌面布局（只是一个额外的包装器）
//-移动布局：模式弹出窗口内可见的内容
//-移动布局：隐藏内容
const closedClassName=isClosedInMobile？css.modalHidden:null；
const classes=classNames（{[css.modalInMobile]：isopenimobile}，css.root，className）；
返回(
{儿童}
);
}
}

.ReactModal\uu覆盖{
不透明度：0；
转换：translateX（-100px）；
过渡：所有500ms的缓进缓出；
}
.ReactModal\uuuu覆盖--打开后{
不透明度：1；
转换：translateX（0px）；
}
.ReactModal__覆盖-关闭前{
不透明度：0；
转换：translateX（-100px）；
}

Flex模板使用，因此命名类的语法更简单（无需使用BEM）

您可以在ModalInMobile.module.css中添加类似的内容：

@keyframes animateModal {
  0% {
    top: -20px;
  }
  100% {
    top: 0;
  }
}

.root {
  width: 100%;
  animation-name: animateModal;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

注意：。根类名称传递给此行中的组件：

const classes = classNames({ [css.modalInMobile]: isOpenInMobile }, css.root, className);

---

您可以从这里了解更多关于FTW模板的信息：

只是好奇，为什么不使用React引导或一些已经有工作模式的库呢？或者你的应用程序的目的是构建一个模式弹出窗口吗？应用程序的结构就是这样的，我必须坚持它，这样我就不会在其他地方把事情搞砸了