React js Animation с навигационной панелью ключевых кадров и окном поиска

Question

Здравствуйте, я пытаюсь получить это, используя ключевые кадры и css в js:

но я получил это:

Ну, у меня есть некоторые проблемы, потому что мне нужна анимация translate + fade

, но я знаю, что с использованием видимости я не буду в состоянии сделать то, что мне нужно, после применения перехода, используйте дисплей none, чтобы скрыть один и показать другой

код:

jsx: :

const NavMain = props => {
  const [test, setText] = useState(true);
  const [searchOpen, setSearchOpen] = useState(false);

  const handleTest = () => {
    if (searchOpen) {
      setText(false);
    }
    setText(!test);
    setTimeout(function() {
      return setSearchOpen(true);
    }, 500);
  };
  const handleSearch = () => {
    if (test) {
      searchOpen(false);
    }
    setSearchOpen(false);
    setTimeout(function() {
      return setText(true);
    }, 500);
  };
  return (
    <Nav>
      <Container>
        <NavBetween test={test} searchOpen={searchOpen}>
          <WrapLogo>a</WrapLogo>
          <NavUl test={test} searchOpen={searchOpen}>
            <NavLi>
              <a>One</a>
            </NavLi>
            <NavLi>
              <a>Two</a>
            </NavLi>
            <NavLi>
              <a>Three</a>
            </NavLi>
            <NavLi>
              <a>Four</a>
            </NavLi>
            <NavLi>
              <a>Five</a>
            </NavLi>
            <NavLi>
              <a>Home</a>
            </NavLi>
            <NavLi>
              <a>Home</a>
            </NavLi>
            <NavLi>
              <a>Home</a>
            </NavLi>
            <NavLi>
              <a>Home</a>
            </NavLi>
            <NavLi>
              <FontAwesomeIcon
                onClick={handleTest}
                className="searchIcon"
                rotation={90}
                icon={faSearch}
                size="1x"
                fixedWidth
                color="rgba(0, 0, 0, 0.08);"
              />
            </NavLi>
          </NavUl>
          <SearchWrapper test={test} searchOpen={searchOpen}>
            <FlexInput>
              <input placeholder="Pesquisar" />
              <IconContainer>
                <FontAwesomeIcon
                  onClick={handleSearch}
                  className="searchIcon"
                  icon={faTimes}
                  size="xs"
                  fixedWidth
                  color="black"
                />
              </IconContainer>
            </FlexInput>
          </SearchWrapper>
        </NavBetween>
      </Container>
    </Nav>
  );
};

css in js (эмоция js)

const KeySearch = keyframes`
from { visibility: visible; transform: translateY(0); opacity: 1; }
to   { 
  visibility: hidden; 
  transform: translateY(20px); 
  opacity: 0; display:none;
}
`;
const KeySearch2 = keyframes`
from { 
  transform: translateY(-25px); 
  opacity: 0; }
to   { 
  transform: translateY(0px); 
  opacity: 1; 
  display:flex;
}
`;

export const Container = styled.div`
  height: 100%;
  margin: 0 auto;
  max-width: 80rem !important;
  width: 80rem !important;
`;

export const Nav = styled.nav`
  width: 100%;
  height: auto;
  background: hotpink;
  padding: 10px 0;
`;
export const NavBetween = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
`;
export const NavUl = styled.ul`
  display: flex;
  ${props =>
    !props.test &&
    css`
      animation: ${KeySearch} 0.5s;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    `}
  ${props =>
    props.searchOpen &&
    css`
      display: none !important;
    `}
  width: 70%;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  svg {
    cursor: pointer;
  }
`;

export const NavLi = styled.li`
  a {
    font-family: "Poppins", sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: 1px;
    display: block;
    color: rgba(0, 0, 0, 0.6);
    padding: 16px 20px;
    line-height: 24px;
    :hover {
      color: #cdcdcd;
      transition-duration: 0.5s;
      transition-property: background-color, color;
    }
  }
`;
export const WrapLogo = styled.div`
  width: 20%;
  img {
    height: 40px;
  }
`;

export const SearchWrapper = styled.div`
  ${props =>
    props.searchOpen &&
    css`
      animation: ${KeySearch2} 0.5s;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    `}
  visibility:hidden;
  width: 0;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  background: red;
`;

export const FlexInput = styled.div`
  width: 100%;
  display: inline-flex;
  align-items: center;
  height: 100%;
  background: #fff;
  transition: all 0.4s;
  input {
    background: transparent;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0.5rem 0.8rem 0.5rem 1.2rem;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #a9a9a9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: initial;
    font-family: "Poppins", sans-serif;
  }
`;

export const IconContainer = styled.div`
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: 30px;
  cursor: pointer;
  :hover {
    color: white;
  }
`;

пример:

https://codesandbox.io/s/crimson-dew-ed7zx

и я тоже понимаю, что мои логи c для этого очень некрасивы ..