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