反应模态动画模态关键帧

Question

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

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

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

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

Answer 1

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

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

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

}

Answer 2

translateY表示在y轴上移动元素。在您的元素默认定位的位置，y 轴（以及其他两个轴）上的值是 0.

所以如果你想在 y 轴上向上移动你的元素，你写 (-distance)。如果你想向下移动它，你写 (+distance)

因此，如果您希望您的元素来自 'below'，您需要先将其定位在默认位置下方。通过使用正值。然后附上动画。

因此也将 transform:translateY(50%) 添加到模态本身以覆盖它的默认位置。

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

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

.modal {
background:red;
width:10px;
height:100px;
animation:modalSlide 0.5s ease-out forwards;
transform: translateY(50%);
}

<div class="modal">
</div>

反应模态动画模态关键帧

React modal animation modal keyframes

css

react-modal