TailwindCSS中实现仅折叠内容的CSS过渡效果问题

问题出在你用了hidden类——这个类会把元素设置为display: none，而CSS过渡对display属性的变化完全不生效，所以展开时看不到过渡效果。另外你把过渡样式拆到展开/收起的状态类里，也容易出问题。

直接按下面的方式修改代码就能解决：

return (
  <div className="flex-col border-b-2 border-slate-100">
    <div
      onClick={handleSetIsOpen}
      className="px-5 pt-3 pb-2 font-bold cursor-pointer"
    >
      {item.title}
    </div>
    <div
      className={`px-3 pb-3 overflow-hidden transition-all duration-500 ease-in-out ${
        isOpen ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
      }`}
    >
      {item.text}
    </div>
  </div>
);

关键修改点：

• 删掉了hidden类，改用max-h-0 + overflow-hidden来隐藏文本区域，这样元素始终在DOM中，过渡能正常触发
• 把transition-all duration-500 ease-in-out放到基础className里，不管展开还是收起都生效，不用重复写
• 状态切换只控制opacity和max-h，这两个属性都支持CSS过渡，保证展开收起有平滑动画
• 标题区域完全没加过渡样式，所以点击时不会有任何过渡效果，符合你的需求

如果文本内容很长，max-h-screen可能会导致页面滚动，你可以换成一个具体的数值比如max-h-96，根据实际需求调整就行。

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