汉堡菜单点击切换为叉号的问题排查与CSS动画序列实现需求

我来帮你排查汉堡菜单切换失效的问题，同时实现你想要的动画序列效果，咱们一步步来解决：

问题分析 #

你的代码主要有几个核心问题导致功能失效和动画不符合预期：

• 选择器逻辑错误：你试图给单个span加.active类，但正确的逻辑应该是把active类添加到.icon-menu容器上，再通过后代选择器控制子元素状态
• 动画未保留最终状态：动画结束后元素会自动回到初始样式，需要添加animation-fill-mode: forwards锁定最终效果
• 动画序列未按序触发：你需要控制动画的先后顺序，让顶部/底部span先消失，再让中间的伪元素完成旋转放大
• 中间元素动画逻辑偏差：原代码对中间span的处理没有针对伪元素做旋转放大的动画配置

修正后的完整代码 #

HTML #

<div class="icon-menu">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS #

.icon-menu {
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  transform-origin: center;
  
  > span {
    position: absolute;
    top: 50%;
    background: black;
    height: 1px;
    transition: all 0.3s ease;
  }
  
  > span:first-child {
    width: 40%;
    left: 0;
    transform: translateY(-7px);
  }
  
  > span:last-child {
    width: 40%;
    right: 0;
    transform: translateY(7px);
  }
  
  > span:nth-of-type(2) {
    width: 100%;
    &::before, &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      background: black;
      transition: all 0.3s ease;
      transform-origin: center;
    }
    &::before {
      transform: translateY(-7px);
    }
    &::after {
      transform: translateY(7px);
    }
  }
  
  /* 激活状态下的样式与动画 */
  &.active {
    > span:first-child,
    > span:last-child {
      /* 顶部和底部span平滑消失 */
      width: 0;
      opacity: 0;
    }
    
    > span:nth-of-type(2) {
      &::before {
        /* 延迟0.2s执行，等待顶部底部消失后旋转放大 */
        animation: rotateCrossTop 0.3s ease 0.2s forwards;
      }
      &::after {
        animation: rotateCrossBottom 0.3s ease 0.2s forwards;
      }
    }
  }
}

/* 顶部叉号旋转放大动画 */
@keyframes rotateCrossTop {
  0% {
    transform: translateY(-7px) scaleX(1);
  }
  100% {
    transform: translateY(0) rotate(45deg) scaleX(1.2);
  }
}

/* 底部叉号旋转放大动画 */
@keyframes rotateCrossBottom {
  0% {
    transform: translateY(7px) scaleX(1);
  }
  100% {
    transform: translateY(0) rotate(-45deg) scaleX(1.2);
  }
}

JavaScript #

const iconMenu = document.querySelector('.icon-menu');
iconMenu.addEventListener('click', () => {
  iconMenu.classList.toggle('active');
});

关键改动说明 #

1. 选择器逻辑修正：把.active类绑定到容器上，通过.icon-menu.active > span精准控制子元素状态，避免选择器匹配错误
2. 动画序列控制：给中间伪元素的动画添加0.2s延迟，等待顶部和底部span的消失过渡完成，实现「先消失再旋转」的有序动画
3. 锁定动画最终状态：使用animation-fill-mode: forwards让动画结束后停留在关键帧的最终样式，不会回弹
4. 简化结构逻辑：重新梳理span的定位逻辑，让顶部/底部span直接用translateY定位，中间span的伪元素负责形成汉堡的中间线条，激活时旋转成叉号
5. 过渡动画优化：统一使用transition: all 0.3s ease让所有过渡更流畅，调整动画时长让整个切换过程更自然

这样修改后，点击汉堡菜单就可以正常切换成叉号，并且严格按照你想要的动画顺序执行：顶部和底部span先平滑消失，随后中间的两个伪元素放大并旋转成叉号。

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