vh 单位似乎不适用于转换：translateY

Question

我有两个半页大小的覆盖层，它们以相反的方式翻译，给人一种屏幕正在打开的错觉。此外，我希望它们停在距视口顶部或底部约 8% 的位置，而不是完全消失。它实际上不适用于 %，因为在带有栏和其他 UI 的移动设备上它们会被切断。我尝试使用 vh 但它只是消失在视口边缘。

/*default animations*/

.main-transition-overlay1 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: page-transition-top;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-bottom: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0px 1.5px #99ffff, 0 0px 2.5px #99ffff, 0 0px 5.5px #99ffff, 0 0px 10px #0cbfe9, 0 0px 20px #0cbfe9, 0 0px 22px #0cbfe9, 0 0px 25px #0cbfe9, 0 0px 36px #0cbfe9;
}

@keyframes page-transition-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-92vh);
  }
}

.main-transition-overlay2 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 50vh;
  left: 0;
  width: 100%;
  animation-name: page-transition-bottom;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-top: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0 1.5px #99ffff, 0 0 2.5px #99ffff, 0 0 5.5px #99ffff, 0 0 10px #0cbfe9, 0 0 20px #0cbfe9, 0 0 22px #0cbfe9, 0 0 25px #0cbfe9, 0 0 36px #0cbfe9;
}

@keyframes page-transition-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(92vh);
  }
}

<!--main screen transition overlay-->
<div>
  <div class="main-transition-overlay1"></div>
  <div class="main-transition-overlay2"></div>
</div>

Answer 1

您的转换值应该是 translateY(42vh) （和 -42vh）而不是 +/-92vh，这是元素向上/向下移动的量：

/*default animations*/

.main-transition-overlay1 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: page-transition-top;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-bottom: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0px 1.5px #99ffff, 0 0px 2.5px #99ffff, 0 0px 5.5px #99ffff, 0 0px 10px #0cbfe9, 0 0px 20px #0cbfe9, 0 0px 22px #0cbfe9, 0 0px 25px #0cbfe9, 0 0px 36px #0cbfe9;
}

@keyframes page-transition-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-42vh);
  }
}

.main-transition-overlay2 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 50vh;
  left: 0;
  width: 100%;
  animation-name: page-transition-bottom;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-top: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0 1.5px #99ffff, 0 0 2.5px #99ffff, 0 0 5.5px #99ffff, 0 0 10px #0cbfe9, 0 0 20px #0cbfe9, 0 0 22px #0cbfe9, 0 0 25px #0cbfe9, 0 0 36px #0cbfe9;
}

@keyframes page-transition-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(42vh);
  }
}

<!--main screen transition overlay-->
<div>
  <div class="main-transition-overlay1"></div>
  <div class="main-transition-overlay2"></div>
</div>