css - react 模态动画模态关键帧

Question

我在我的 React 应用程序中为模型使用 React Modal。我想在它们出现时为它们添加一些动画。我在用。 css3 关键帧为我的模式设置动画。

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

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

这提供了很好的滑动效果与动画持续时间相结合，但它是从顶部向下滑动的。我该如何更改，使其从底部向上滑动？

Answer 1

在关键帧 from 中尝试 translateY 的正值:

@keyframes modalSlide {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }