Javascript 单击时反应模态动画

我有一个模态的完整代码：

---

我想能够动画这种模式类似于引导一，与翻译向上和向下和淡入淡出。因此，当我点击删除按钮时，它会在模式中淡出，当我点击关闭模式的按钮时，它会淡出。我尝试使用React转换，但没有效果。如何实现我的目标？

如果不使用javascript而使用简单的CSS，可以这样使用：

@keyframes modalFade {
  from {transform: translateY(-50%);opacity: 0;}
  to {transform: translateY(0);opacity: 1;}
}

.modal {
  animation-name: modalFade;
  animation-duration: .3s;
}

---

在您的/components/Modal/index.css中，这里只有模态显示的动画！要设置关闭动作的动画，您需要将动画方向设置为反向，然后卸载组件。

尝试animate.css@ana，我已经尝试过了，但我不知道如何实现。你能帮我一下吗？把animate.css文件导入你的组件。然后将相关的类名添加到元素中。如果你想在背景中淡出，请使用@anand谢谢，它确实有效！如何以另一种方式做到这一点？我的意思是如何在关闭时淡出？在closeModal函数中，首先将类名动画淡出添加到背景中，然后等待，比如200ms，然后调用此.props.closeModal；并从setTimeout内部设置state。事实上，React Transition旨在使这个过程更简单，但我认为文档不是太好，我还没有弄清楚：我在哪里实现相反的功能？