Страницы

Поиск по вопросам

четверг, 2 апреля 2020 г.

Обратная анимация, при удалении класса

#javascript #html #css

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



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;
}




    


Ответы

Ответ 1



Слишком с анимацией намудрили. Замените её на обычный 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) }

Ответ 2



на 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); }


Комментариев нет:

Отправить комментарий