Как мне заставить строку меню гамбургера перехода работать в обратном порядке в CSS/JS? ⇐ Html

[Anonymous]

Я пытаюсь заставить свое гамбургер-меню работать, но оно не работает (во всяком случае, не так, как мне хотелось бы). Переход анимации работает при первом нажатии кнопки, но при повторном нажатии происходит то же самое. Он должен анимироваться как обратный переход первого элемента при нажатии.

Код: Выделить всё

let a = document.getElementsByClassName("mobile1")[0];

document.querySelector(".button-one").addEventListener("click", () => {
a.classList.toggle("mobile2");
})

Код: Выделить всё

button {
background: transparent;
border: 3px #000 solid;
border-radius: 0.25rem;
position: absolute;
left: 20px;
top: 20px
}

.button-one {
align-items: center;
display: flex;
height: 21px;
width: 30px;
}

.mobile1 {
background-color: black;
height: 3px;
width: 100%
}

.mobile1 {
background-color: currentColor;
position: absolute;
left: 0;
top: 12px;
transition: top 250ms ease, transform 250ms ease 250ms;
transform-origin: center;
width: 100%
}

.mobile2 {
top: 0;
width: 100%;
}

.mobile2 {
transform: rotate(-45deg);
}

Код: Выделить всё

Любая помощь приветствуется...

Подробнее здесь: https://stackoverflow.com/questions/775 ... -in-css-js