如何为汉堡菜单声明自定义group-open变体？动画失效排查

你的汉堡菜单无法生效，核心问题有三个，对应修复方案如下：

1. 修复自定义group-open变体的语法错误 #

原CSS中自定义变体的写法存在两处问题：

• &是HTML转义字符，应直接使用&
• 选择器逻辑错误，正确的group-open变体需要匹配拥有open类的.group元素的子元素

修改后的变体代码（需放在@layer variants中确保Tailwind识别）：

@layer variants {
  @variant group-open {
    &:is(.group.open *) {
      @apply transition-all duration-300;
    }
  }
}

2. 给汉堡线条添加正确的定位属性 #

上下线条的top/bottom属性仅对非静态定位元素生效，且需要父元素设置相对定位作为参照：

• 给按钮容器添加relative，作为线条的定位基准
• 给上下线条添加absolute，配合top-1/2和translate-y-[-50%]确保旋转后居中

修改后的HTML：

<div id="mobile-menu-button" class="group relative h-8 w-8 flex flex-col items-center justify-center cursor-pointer">
  <div class="absolute bg-zinc-200 rounded-full h-1 w-8 transition-all duration-300 group-open:rotate-45 group-open:top-1/2 group-open:translate-y-[-50%]"></div>
  <div class="bg-zinc-200 rounded-full h-1 w-8 my-1 transition-all duration-300 group-open:opacity-0"></div>
  <div class="absolute bg-zinc-200 rounded-full h-1 w-8 transition-all duration-300 group-open:-rotate-45 group-open:top-1/2 group-open:translate-y-[-50%]"></div>
</div>

3. 添加状态切换的JavaScript逻辑 #

没有触发代码的话，open类永远不会被添加到按钮容器上，变体样式无法生效：

document.getElementById('mobile-menu-button').addEventListener('click', function() {
  this.classList.toggle('open');
});

完整修复后的代码 #

HTML

<div id="mobile-menu-button" class="group relative h-8 w-8 flex flex-col items-center justify-center cursor-pointer">
  <div class="absolute bg-zinc-200 rounded-full h-1 w-8 transition-all duration-300 group-open:rotate-45 group-open:top-1/2 group-open:translate-y-[-50%]"></div>
  <div class="bg-zinc-200 rounded-full h-1 w-8 my-1 transition-all duration-300 group-open:opacity-0"></div>
  <div class="absolute bg-zinc-200 rounded-full h-1 w-8 transition-all duration-300 group-open:-rotate-45 group-open:top-1/2 group-open:translate-y-[-50%]"></div>
</div>

CSS

@import "tailwindcss";

@theme {
  --font-quicksand: "Quicksand", sans-serif;
}
@layer base {
  body {
    font-family: var(--font-quicksand);
  }
}
@layer components {
  .menu-item {
    @apply flex relative h-full items-center p-4 cursor-pointer text-pink-200 hover:text-zinc-200 hover:bg-white/10 transition-colors ease-in-out;
  }
}

@layer variants {
  @variant group-open {
    &:is(.group.open *) {
      @apply transition-all duration-300;
    }
  }
}

JavaScript

document.getElementById('mobile-menu-button').addEventListener('click', function() {
  this.classList.toggle('open');
});

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