>

모바일에서 다음과 같은 반응 형 웹 앱을 만들려고했습니다.

메뉴 표시 줄을 클릭하면 다음으로 변환됩니다 :

스타일은 SCSS로 작성되었으며 다음과 같습니다.

.topbar-menu {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  .topbar-navi-menu {
    margin-left: 15px;
    height: 30px;
    width: 40px;
    display: block;
    cursor: pointer;
    position: relative;
    i {
      position: absolute;
      height: 5px;
      width: 100%;
      background-color: #ffffff;
      &.topbar-animate-forward {
        &:first-child {
          animation: topbar-first-bulk 500ms forwards;
        }
        &:nth-child(2) {
          animation: topbar-middle-bulk 500ms forwards;
        }
        &:last-child {
          animation: topbar-last-bulk 500ms forwards;
        }
      }
      &:first-child {
        top: 0;
      }
      &:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }
      &:last-child {
        bottom: 0;
      }
    }
    @keyframes topbar-first-bulk {
      0% {
        top: 0;
        transform: translateY(0%) rotate(0deg);
      }
      25% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }
      50% {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
      100% {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
    }
    @keyframes topbar-middle-bulk {
      0% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }
      25% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }
      50% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
      100% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
    }
    @keyframes topbar-last-bulk {
      0% {
        bottom: 0;
        transform: translateY(0%) rotate(0deg);
      }
      25% {
        bottom: 50%;
        transform: translateY(50%) rotate(0deg);
      }
      50% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
      }
      100% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
      }
    }
  }
}

이유식 을 사용하고 있습니다. reactjs와 같습니다. JSX 구조 :

<div className="topbar-container">
  <section className="topbar-menu">
    <a
      onClick={
        _evt => self.send(MobileMenuToggler(self.state.showMobileMenu))
      }
      className="topbar-navi-menu">
      <i className={self.state.mobileMenuAnimate} />
      <i className={self.state.mobileMenuAnimate} />
      <i className={self.state.mobileMenuAnimate} />
    </a>
  </section>
</div>

CSS를 사용하여 애니메이션을 메뉴 막대로 되 돌리는 방법은 무엇입니까?


  • 답변 # 1

    상태 전환을 위해 전환을 사용하십시오. 애니메이션의 현재 시간 단계 인 보간 값이 고정되어 있기 때문에 애니메이션이 쉽게 앞뒤로 이동하도록 지시 할 수 없습니다. 갑자기 앞쪽이 아니라 뒤쪽에 있어야한다고 스타일에 말한 경우에도 현재 시간 단계와 동일한 새로운 보간 함수를 적용하기 때문에 생각한 방식으로 애니메이션이 적용되지 않습니다. 보간.

    대신, "활성"클래스를 제거 할 때 레이어 전환을 적용하고 원하는 전환 지연을 설정하십시오.

    예를 들어, 스타일에서 애니메이션을 통해 25 %가 될 때까지 변환 변경 사항을 적용하려고했습니다. 해당 속성에 전환 지연을 설정하십시오.

    다단계 애니메이션에 대한 자세한 내용은 다단계 애니메이션 및 전환 사용을 참조하십시오.

    const toggle = document.getElementById("toggle");
    toggle.addEventListener("click", e => {
      toggle.classList.toggle("topbar-animate-forward");
    });
    
    
    .topbar-container {
      background-color: blue;
      padding: 1em;
    }
    .topbar-menu {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
    }
    .topbar-menu .topbar-navi-menu {
      margin-left: 15px;
      height: 30px;
      width: 40px;
      display: block;
      cursor: pointer;
      position: relative;
    }
    .topbar-menu .topbar-navi-menu i {
      position: absolute;
      height: 5px;
      width: 100%;
      background-color: #ffffff;
    }
    .topbar-menu .topbar-navi-menu i {
      transition: top 500ms ease-in-out 125ms, bottom 500ms ease-in-out 125ms, transform 500ms ease-in-out;
    }
    .topbar-menu .topbar-navi-menutopbar-animate-forward i {
      transition: top 500ms ease-in-out, bottom 500ms ease-in-out, transform 500ms ease-in-out 125ms;
    }
    .topbar-menu .topbar-navi-menu i:first-child {
      top: 0;
      transform: translateY(0%) rotate(0deg);
    }
    .topbar-menu .topbar-navi-menu.topbar-animate-forward i:first-child {
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }
    .topbar-menu .topbar-navi-menu i:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }
    .topbar-menu .topbar-navi-menu.topbar-animate-forward i:nth-child(2) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
    .topbar-menu .topbar-navi-menu i:last-child {
      bottom: 0;
      transform: translateY(0%) rotate(0deg);
    }
    .topbar-menu .topbar-navi-menu.topbar-animate-forward i:last-child {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
    }
    
    
    <div class="topbar-container">
      <section class="topbar-menu">
        <a id="toggle" class="topbar-navi-menu">
          <i></i>
          <i></i>
          <i></i>
        </a>
      </section>
    </div>
    
    

관련 자료

  • 이전 javascript - 단일 정수 배열을 사용하여 다른 배열의 항목에 액세스 할 때 발생하는 상황
  • 다음 java - snakeyaml을 사용하여 yaml 파일로 모든 어린이 (및 하위 하위)를 얻는 방법