jquery - 页面加载时的页面转换

Question

我必须在页面加载时创建页面转换/动画。效果应该就像一个overlay/div从右到左穿过整个屏幕

到目前为止，我已经到达了它从右到左穿过并停止的地步，但我需要它从右到左移动并将屏幕移到左侧。

这是我到目前为止所拥有的:

<style>
@keyframes slideInFromLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.transition {

    animation: 1s ease-out 0s 1 slideInFromLeft;

    background: #333;
    padding: 30px;
}
</style>
<div class="transition"></div>

我制作了一张小图来说明我想要的结果。 div从右边进来，从左边出去 [博客]:https://ibb.co/yPJK7Tp “点击此处查看图片

Answer 1

您应该使转换在 -100% 处完成。

由于您添加了一些填充，因此您应该稍微增加该值(例如 -110%)

请参阅此示例:

我在动画中添加了forwards，以便在完成动画后坚持到最后。

   @keyframes slideInFromLeft {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-110%);
      }
    }

    .transition {
      animation: slideInFromLeft 2s ease-out forwards ;
      background: #333;
      padding: 30px;
    }

    <div class="transition"></div>