Question

我在反应应用程序中使用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;
  }

}

Answer 2

translateY表示在y轴上移动元素。默认情况下，您的元素位于何处，y轴（以及另一个轴）上的值为0。

因此，如果您想在y轴上移动元素，请编写(-distance)。如果要将其向下移动，请编写(+distance)

因此，如果您希望自己的元素来自＆＃39;以下，则需要先将其置于其默认位置下方。通过使用正值。然后将动画附加到它。

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

＆＃13;

@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%);
}

＆＃13;

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

＆＃13;

反应模态动画模态关键帧

2 个答案: