vh 单元似乎不适用于 transform: translateY

Question

我有 2 个半页大小的叠加层，它们以相反的方式转换，给人一种屏幕正在打开的错觉。此外，我希望它们在距视口顶部或底部大约 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，这是元素移动的量 up/down:

/*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>

vh 单元似乎不适用于 transform: translateY

The vh unit doesn't seem to work with transform: translateY

css

animation

css-transforms

translate-animation

viewport-units