Next.js/React+TailwindCSS手风琴展开动画失效求助

我正在尝试为可展开面板（accordion）实现动画效果：默认状态下子组件设置为display:none，当鼠标悬停至其父组件时，子组件显示，同时父组件的宽高自动适配调整，但动画并未生效。

最小复现代码 #

export default function Home() {
  return (
    <main className="flex w-[50vw] p-10 items-center justify-center">
      <div className="border-black group border-2 transition-all min-w-5 min-h-5 w-auto h-auto bg-red-300">
        <div className="hidden w-20 group-hover:block bg-gray-200">
          placeholder
        </div>
      </div>
    </main>
  );
}

我发现如果手动设置父组件的尺寸，动画就能正常运行，但这种方式需要硬编码尺寸数值，不符合需求：

export default function Home() {
  return (
    <main className="flex w-[50vw] p-10 items-center justify-center">
      <div className="border-black group border-2 transition-all w-5 h-5 hover:w-10 hover:h-10 bg-red-300">
        <div className="hidden w-20 group-hover:block bg-gray-200">
          placeholder
        </div>
      </div>
    </main>
  );
}

请问能否让第一个版本的代码正常生效？

问题根源有两个：

1. display:none 无法触发CSS过渡动画——这个属性会直接将元素从DOM流中移除，没有过渡所需的中间状态。
2. 父组件用 w-auto h-auto 时，浏览器无法计算出明确的尺寸变化值，过渡动画需要明确的起始/结束数值才能生效。

可以通过以下两种方式修改，无需硬编码尺寸：

方法一：用 max-height/max-width 替代 display:none #

利用 max-height 和 overflow:hidden 的过渡实现展开/收起，同时让父组件自动适配尺寸：

export default function Home() {
  return (
    <main className="flex w-[50vw] p-10 items-center justify-center">
      <div className="border-black group border-2 transition-all min-w-5 min-h-5 bg-red-300">
        {/* 设置足够大的max-height确保内容完全展开，配合overflow:hidden隐藏超出部分 */}
        <div className="w-20 max-h-0 overflow-hidden transition-all duration-300 group-hover:max-h-20 bg-gray-200">
          placeholder
        </div>
      </div>
    </main>
  );
}

说明： #

• 子组件默认以 max-h-0 overflow-hidden 隐藏内容，但仍保留在DOM流中（仅占据最小空间）。
• 悬停时设置 group-hover:max-h-20（数值大于子组件实际高度即可），配合 transition-all 实现平滑展开。
• 父组件无需固定宽高，会自动根据子组件状态调整尺寸，浏览器能计算出明确的尺寸变化值，因此父组件的边框、背景也会触发过渡动画。

方法二：结合 scale 和 opacity 实现视觉隐藏 #

如果需要更细腻的动画效果，可以用缩放+透明度过渡，同时保留元素布局空间：

export default function Home() {
  return (
    <main className="flex w-[50vw] p-10 items-center justify-center">
      <div className="border-black group border-2 transition-all min-w-5 min-h-5 bg-red-300">
        <div className="w-20 scale-y-0 opacity-0 transition-all duration-300 group-hover:scale-y-100 group-hover:opacity-100 origin-top bg-gray-200">
          placeholder
        </div>
      </div>
    </main>
  );
}

说明： #

• 子组件默认用 scale-y-0 opacity-0 实现视觉隐藏，但仍占据布局空间，父组件初始尺寸会适配这个状态（高度为0）。
• 悬停时恢复 scale-y-100 opacity-100，实现平滑的展开动画，父组件也会自动调整尺寸并触发过渡。

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