css - 反应模态动画模态关键帧

Question

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

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

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

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

Answer 1

translateYy表示在轴上移动元素。默认情况下放置元素的位置，y轴（以及其他两个轴）上的值是0.

因此，如果您想在轴上向上移动元素y，请编写(-distance). 如果你想把它向下移动，你写(+distance)

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

因此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>

Answer 2

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

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

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

}