点击时反应模态动画答案

【问题标题】：React modal animation on click点击时反应模态动画
【发布时间】：2017-10-24 10:09:09
【问题描述】：

我有一个模态的完整代码：
https://codesandbox.io/s/8yxmz73l1j
我希望能够为这种模式设置动画，类似于引导模式，上下平移以及淡入淡出。因此，当我单击delete 按钮时，它会淡出模式，当我单击关闭模式的按钮时，它会淡出。我尝试使用 React Transition 但无济于事。我怎样才能实现我想要的？

【问题讨论】：

试试 animate.css daneden.github.io/animate.css
@anand 我已经尝试过，但我不知道如何实现。你能帮我看看吗？
将 animate.css 文件导入到您的组件中。然后将相关的 className 添加到您的元素中。假设您想淡入背景，请使用<div className="backdrop animated fadeIn" style={backdropStyle}>
@anand 谢谢，它确实有效！如何以另一种方式做到这一点？我的意思是如何在关闭时淡出？
在 closeModal 函数中，首先将 className animated fadeOut 添加到背景中，然后等待，比如说 200 毫秒，然后从 setTimeout 内部调用 this.props.closeModal(); 和 setState。实际上，React Transition 是为了让这个过程更简单，但我认为文档不是太好，我还没有弄清楚:)

标签： javascript twitter-bootstrap reactjs animation modal-dialog

【解决方案1】：

不使用 javascript 而使用简单的 CSS，这可以使用 keyframe animations 像这样：

@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 所以这里，你只有模态显示的动画！要为关闭动作设置动画，您需要将 animation-direction 设置为 reverse 然后卸载组件。

【讨论】：

我在哪里实现反向？