Почему ключевые кадры CSS не работают с абсолютным положением? - PullRequest
Новая
       19

Почему ключевые кадры CSS не работают с абсолютным положением?

1 голос
/ 19 марта 2019

Я работал над панелью поиска, которая появляется, когда пользователь прокручивает страницу вниз, и исчезает при прокрутке вверх.Я смог заставить анимацию работать идеально с позицией : фиксированная , однако, тот же стиль не , работающий с позицией : абсолютная .

По-видимому, когда появляется клавиатура iOS, элементы с позицией: fixed - haywire - поэтому я должен заставить эту работу работать с позицией : 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;
  }
}
...