React+Tailwind CSS手风琴：条件渲染元素的上下展开过渡问题

你当前的问题核心在于条件渲染直接添加/移除DOM元素——当expanded为false时，内容div会直接从DOM中被移除，Tailwind的transition没有可作用的元素，自然无法产生平滑过渡效果。另外代码里还有个拼写错误：tansition应该是transition。

解决方案 #

不要通过条件渲染移除元素，而是通过控制元素的max-height、opacity、padding等属性实现显示/隐藏，让元素始终保留在DOM中，这样过渡动画才能生效。

修改后的完整代码 #

import { useState } from 'react';
import { FaCaretRight } from 'react-icons/fa';

const Accordion = () => {
  const [expanded, setExpanded] = useState(false);

  const handleClick = () => {
    setExpanded(!expanded);
  };

  return (
    <>
      <div className="flex flex-col items-center my-3 px-4">
        <div className="flex items-center justify-between w-full border-b-2 border-rose-500">
          <h2 className="text-3xl font-bold text-black/90">
            Title
          </h2>
          <div
            className={`text-3xl opacity-90 transition duration-200 ${expanded ? 'rotate-90' : 'rotate-0'}`}
            onClick={handleClick}
          >
            <FaCaretRight />
          </div>
        </div>
        {/* 替换条件渲染，用类控制过渡 */}
        <div className={`overflow-hidden transition-all duration-300 ease-in-out ${
          expanded ? 'max-h-96 opacity-100 py-3 px-3' : 'max-h-0 opacity-0 py-0 px-3'
        } text-xl`}>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam illo quo inventore ducimus qui animi corrupti nostrum, culpa est cum.
        </div>
      </div>
    </>
  );
};

export default Accordion;

关键细节说明 #

• max-h-0和max-h-96：由于height: auto无法触发过渡，用最大高度模拟展开/收缩效果，max-h-96可根据实际内容高度调整为足够大的值
• overflow-hidden：防止内容在收缩状态下溢出容器
• transition-all：让所有可过渡属性（最大高度、透明度、内边距）都参与动画
• ease-in-out：让过渡动画的速度变化更自然
• 收缩状态保留px-3：避免元素宽度跳动，仅调整上下内边距py-0/py-3

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