Nextjs/React 展开框（手风琴）动画因 tailwindcss 失败

Question

我正在尝试为可扩展框（手风琴）制作动画。

这就是我想要实现的：子组件默认设置为

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>
  );
}

但这不是我们想要的：因为我们必须为父母的尺寸放置幻数。

是否可以让我的代码的第一个版本运行？

提前致谢。

Answer 1

将元素从

display:none

转换为

block

相当棘手，仅仅是因为“块元素无法部分显示”。浏览器无法在那里计算转换。

我建议尝试不同的方法，要么使用外部库（Framer-motion、gsap），要么遵循 @wongjn 评论中建议的最大高度方法。

这是一个 codepen，具有顺风解决方案，使用最大高度方法。

希望这有帮助！