如何让CSS/JS实现的汉堡菜单线条过渡动画反向生效？

问题根源 #

1. 重复定义的CSS规则导致样式覆盖，过渡逻辑混乱；
2. 初始状态的过渡时序设置，在反向移除类时无法形成对称的动画效果，导致第二次点击时动画重复而非反向。

修正后的代码 #

HTML（无需修改）

<button class="button-one">
  <div class="mobile1"></div>
</button>

JS（无需修改）

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

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

CSS（核心修正）

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;
  position: relative; /* 确保内部绝对定位元素以按钮为参照 */
}

/* 合并重复的.mobile1规则，统一初始样式 */
.mobile1 {
  background-color: currentColor;
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 12px;
  transform-origin: center;
  /* 正向动画：先移动top，延迟后执行旋转 */
  transition: top 250ms ease, transform 250ms ease 250ms;
}

.mobile2 {
  top: 0;
  transform: rotate(-45deg);
  /* 反向动画：先恢复旋转，延迟后恢复top位置，和正向时序对称 */
  transition: transform 250ms ease, top 250ms ease 250ms;
}

修复说明 #

• 合并了重复的CSS选择器，避免样式冲突；
• 给.button-one添加position: relative，确保内部的绝对定位元素参照正确；
• 分别给初始状态和激活状态设置对称的过渡时序：
  • 正向点击：先执行top移动动画（250ms），延迟250ms后执行旋转动画；
  • 反向点击：先执行旋转复位动画（250ms），延迟250ms后执行top位置复位，形成流畅的反向过渡效果。

内容的提问来源于stack exchange，提问作者user22190533