javascript - 点击时 react 模态动画

Question

我有一个模态的完整代码:
https://codesandbox.io/s/8yxmz73l1j
我希望能够为该模式设置动画，类似于 Bootstrap ，具有向上和向下翻译以及淡入和淡出的功能。因此，当我单击“删除”按钮时，它会在模式中淡出，而当我单击关闭模式的按钮时，它会淡出。我尝试使用 React Transition 但没有成功。我怎样才能实现我想要的？

Answer 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中，所以在这里，你只有模态显示的动画!要为关闭操作设置动画，您需要将动画方向设置为反向，然后卸载组件。