如何为Headless UI+Tailwind CSS手风琴添加滑入滑出过渡

要实现目标中的滑入滑出过渡，你需要把当前基于缩放的过渡改成高度变化+透明度的组合过渡，同时确保面板内容被正确裁剪。以下是修改后的代码：

<Transition
  enter="transition-all duration-300 ease-in-out"
  enterFrom="max-h-0 opacity-0"
  enterTo="max-h-[500px] opacity-100"
  leave="transition-all duration-300 ease-in-out"
  leaveFrom="max-h-[500px] opacity-100"
  leaveTo="max-h-0 opacity-0"
>
  <Disclosure.Panel as="dd" className="mt-2 pr-12 overflow-hidden">
    <p className="text-base leading-7 text-gray-600 py-2">{faq.answer}</p>
  </Disclosure.Panel>
</Transition>

关键调整说明： #

• 用max-h-0和max-h-[500px]替代缩放变换：通过最大高度的变化模拟滑入滑出效果，max-h-[500px]可根据你的内容高度调整，只要大于实际内容的最大高度即可。
• 给面板添加overflow-hidden：确保面板内容在高度为0时被隐藏，不会出现内容溢出的情况。
• 调整过渡时长为duration-300：让动画节奏更平缓，贴近目标效果的流畅度。
• 给内容添加py-2：避免内容在高度变化时紧贴面板边缘，提升视觉体验。

如果需要更精准的高度过渡（比如基于内容实际高度动态计算），可以结合JavaScript实现，但上述方案已经能满足大部分场景的滑入滑出需求。

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