Question

我试图为div设置动画，除了出现不需要的垂直滚动条外，一切都很好。我确实搜索了解决方案，但我只找到了body，html {overflow：hidden}这个有效，但问题是其他元素也被隐藏了。这是我的代码： -

.main-content {
  position: relative;
  height: 500px;
}

.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-container ul {
  list-style: none;
}
.box-container .box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: pink;
  border-radius: 50%;
  opacity: 0;
}

.animate1 {
  animation: animate .5s ease-in-out forwards;
}

.animate2 {
  animation: animate .5s ease-in-out .5s forwards;
}

.animate3 {
  animation: animate .5s ease-in-out 1.0s forwards;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(1000px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
p {
  max-width: 80%;
  margin: 0 auto;
}

<div class="main-content">
    <div class="box-container">
      <ul class="list-unstyle list-inline">
          <li class="box animate1"></li>
          <li class="box animate2"></li>
          <li class="box animate3"></li>
      </ul>
    </div>
</div>
<div>
 <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

您可以使用1000px而不是从calc(100vh - 250px)开始制作动画，这些价值取决于您的给定值。

球从页面底部移动，因此没有滚动条，因此

示例代码段：

.main-content {
  position: relative;
  height: 500px;
}
.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-container ul {
  list-style: none;
}
.box-container .box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: pink;
  border-radius: 50%;
  opacity: 0;
}
.animate1 {
  animation: animate .5s ease-in-out forwards;
}
.animate2 {
  animation: animate .5s ease-in-out .5s forwards;
}
.animate3 {
  animation: animate .5s ease-in-out 1.0s forwards;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(calc(100vh - 250px));
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
p {
  max-width: 80%;
  margin: 0 auto;
}

<div class="main-content">
  <div class="box-container">
    <ul class="list-unstyle list-inline">
      <li class="box animate1"></li>
      <li class="box animate2"></li>
      <li class="box animate3"></li>
    </ul>
  </div>
</div>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

动画时出现垂直滚动条

1 个答案: