4

Делаю анимированный менюбар. Анимацию на открытие сделал, а на закрытие обратную анимацию не получается сделать. Подскажите, как это делается?

var collapse = document.getElementById('collapse-menu');
collapse.addEventListener('click', function(e) {
  this.classList.toggle('l-header__bar_close');
});
@keyframes barToClose_one {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 9px);
  }
  100% {
    transform: translate(0, 9px) rotate(45deg);
  }
}

@keyframes barToClose_two {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0) rotate(-45deg);
  }
}

@keyframes barToClose_three {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -9px);
  }
  100% {
    transform: translate(0, -9px) rotate(-45deg);
  }
}

.l-header {
  height: 45px;
  background-color: #10151c;
}

.l-header__bar {
  width: 50px;
  height: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
}

.l-header__icon-bar {
  background-color: #fff;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
}


/* Animate bar to close */

.l-header__bar_close .l-header__icon-bar:nth-child(1) {
  animation: barToClose_one 500ms cubic-bezier(0, .61, 1, .55) forwards;
}

.l-header__bar_close .l-header__icon-bar:nth-child(2) {
  animation: barToClose_two 500ms cubic-bezier(0, .61, 1, .55) forwards;
}

.l-header__bar_close .l-header__icon-bar:nth-child(3) {
  animation: barToClose_three 500ms cubic-bezier(0, .61, 1, .55) forwards;
}
<div class="l-header">
  <div class="l-header__bar" id="collapse-menu">
    <div class="l-header__icon-bar"></div>
    <div class="l-header__icon-bar"></div>
    <div class="l-header__icon-bar"></div>
  </div>
</div>

3
  • на открытие вешаешь на менюбар класс1 с анимацией1, на закрытие вешаешь класс2 с анимацией2. 7 апр 2018 в 9:51
  • Иван, есть готовый пример у меня в вопросе... Если поможет, глянь
    – Air
    7 апр 2018 в 11:27
  • ru.stackoverflow.com/questions/769740/…
    – Air
    7 апр 2018 в 11:27

2 ответа 2

4

Слишком с анимацией намудрили. Замените её на обычный transform, а его анимируйте через transition:

var collapse = document.getElementById('collapse-menu');
collapse.addEventListener('click', function(e) {
  this.classList.toggle('active');
});
.l-header {
   height: 45px;
   background-color: #10151c;
}

.l-header__bar {
   width: 50px;
   height: 100%;
   padding: 17px 10px;
   box-sizing: border-box;
}

.l-header__icon-bar {
   background-color: #fff;
   height: 3px;
   border-radius: 2px;
}


/* Animate bar to close */

.l-header__icon-bar{
transition: transform .3s, opacity .3s;
}


.active .l-header__icon-bar:nth-child(1) {
transform: translate(0, 3px) rotate(45deg);
}
.l-header__icon-bar:nth-child(1) {
transform: translate(0, -6px)
}

.active .l-header__icon-bar:nth-child(2) {
opacity: 0;
}

.active .l-header__icon-bar:nth-child(3) {
transform: translate(0, -3px) rotate(-45deg)
}
.l-header__icon-bar:nth-child(3) {
transform: translate(0, 6px)
}
<div class="l-header">
  <div class="l-header__bar" id="collapse-menu">
    <div class="l-header__icon-bar"></div>
    <div class="l-header__icon-bar"></div>
    <div class="l-header__icon-bar"></div>
  </div>
</div>

3

на jQuery я знаю как это сделать не применял вашу разметку но аналогичная ... смотрите

$(document).ready(function() {
  $(".trigger").click(function(e) {
    $(this).toggleClass("active_trigger");
  });
});
*{
  margin:0;
  padding:0;
}
span.trigger{
  display:inline-block;
  width:50px;
  height:50px;
  margin:40px;

}
span.trigger i{
  display:block;
  width:40px;
  height:10px;
  background:#000;
  margin:4px auto;
  transition:all .3s linear;
}
span.active_trigger i:nth-child(2){
  opacity:0;
}
span.active_trigger i:nth-child(1){
  transform:rotate(-45deg)translate(-12px,10px);
}
span.active_trigger i:nth-child(3){
  transform:rotate(45deg)translate(-10px,-7px);  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header">
  <div class="menu">
    <span class="trigger">
      <i></i>
      <i></i>
      <i></i>
    </span>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.