Question

我研究了一个搜索栏，当用户向下滚动页面时该搜索栏出现，而当用户向上滚动页面时该搜索栏消失。我能够使动画在 position：fixed （完美位置）上正常工作，但是，相同的样式是 not 与 position：absolute （绝对位置）一起工作。

显然，当iOS键盘出现时，位置为：固定为haywire的元素-因此，我必须在位置为 position：absolute 的地方使用此功能。现在的问题是该行为根本不起作用。实际上，它的行为几乎是相反的，它在页面加载时出现，并以闪烁的方式立即向上平移。谁能提出解决方案？

下面的我的代码位于ReactJS和Scss中，您可以在这里找到沙箱版本：https://codesandbox.io/s/lxyx58jo4m?fontsize=14。如果您不熟悉React，isSearchBar会根据滚动确定该类是 show-search-bar 还是 hide-search-bar

<div className={`search-bar-mobile-container ${isSearchBar ? "show-search-bar" : "hide-search-bar"}`} >
      <form>
      </form>
    </div>

@keyframes exit-up-search-bar {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-76px);
    height: 0;
  }
}
@keyframes entrance-down-search-bar {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
    height: 76px;
  }
}
.search-bar-mobile-container{
  width: 100%;
  height: 76px;
  background-color: #00c0d1;
  position: absolute;
  z-index: 1000000001;
  top:-76px;
  transition: all 0.3s ease-out;
  &.show-search-bar{
    animation: entrance-down-search-bar 0.3s forwards;
    animation-timing-function: ease-out;
    top:0;
  }
  &.hide-search-bar{
    animation: exit-up-search-bar 5s forwards;
    animation-timing-function: ease-out;
    top:-76px;
  }
}

为什么CSS关键帧不能与“绝对位置”一起使用？

0 个答案: