vh單位似乎不適用于transform:translateY

我有 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>

uj5u.com熱心網友回復：

您的轉換值應該是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>

標籤：css 动画 css 转换 翻译动画 视口单位

上一篇：flutterbuildapk--release失敗并出現錯誤

下一篇：用影片折疊div：如何改進這段代碼？