菜单显示和折叠时平滑过渡

tro*_*mgy 5

问题是display属性（通过hidden类）不能被动画化，你可以在这里看到动画属性的完整列表。

您可以设置动画height，但它需要明确指定完整的菜单高度（auto不会设置动画），因此h-32在下面的代码中只是一个示例，您可能需要根据您的具体情况进行更改。

这是一个例子：

      <div
        className={`${
          active ? 'h-32' : 'h-0'
        } transition-all delay-150 duration-300 overflow-hidden w-full`}
      >
      ...

注意transition-all使用了，simpletransition不会动画height，ease-in-out去掉了，因为是多余的，同样的计时功能已经包含在transition-all.