我正在试着让我的汉堡菜单发挥作用，但它没有(无论如何都不是我想要的).动画过渡在第一次单击该按钮时起作用，但在再次单击时，它会执行相同的操作.它的动画应该像单击时第一个的反向过渡一样.
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);
}<button class="button-one">
<div class="mobile1"></div>
</button>任何帮助我们都会很感激.