Страницы

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

воскресенье, 9 июня 2019 г.

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

Делаю анимированный менюбар. Анимацию на открытие сделал, а на закрытие обратную анимацию не получается сделать. Подскажите, как это делается?
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; }



Ответ

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


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

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