React中Tailwind CSS动态列表组过渡效果失效问题

AI 小北

2026-7-3

React + Tailwind CSS 平滑过渡失效解决方案

你的问题出在用hidden/block切换显示状态——display: none属性无法触发CSS过渡，因为元素会直接从文档流中消失/出现，没有过渡的中间状态。要实现从上到下的平滑展开，得改用可动画的属性来控制。

修改方案

用max-height+opacity+overflow-hidden替换hidden/block，具体调整如下：

收起状态：设置max-h-0（高度为0）、opacity-0（完全透明），配合overflow-hidden隐藏超出内容
展开状态：设置足够大的max-h-[500px]（大于列表实际高度即可）、opacity-100（完全显示）
桌面端（lg断点）保持原有的展开状态，不受show控制

修改后的完整代码

<div className="category-section w-full lg:w-[30%] lg:max-w-[280px] min-w-[250px]">
  <span onClick={() => setShow(!show)} className='text-gray-800 font-semibold cursor-pointer flex-row justify-between flex items-center gap-2 px-4 py-3.5 bg-[#faebd7]'>
    <span><i className="fa-sharp fa-regular fa-bars"></i> Categories</span>
    <span><i className="fa-regular fa-arrow-down-big-small"></i></span>
  </span>
  
  <div className={`
    ${show ? 'max-h-[500px] opacity-100 top-[10vh]' : 'max-h-0 opacity-0'}
    px-4 lg:flex lg:flex-col absolute lg:static bg-white z-[60] left-0 right-0 w-auto md:w-auto md:pl-0
    overflow-hidden transition-all duration-500 ease-in
    lg:max-h-[500px] lg:opacity-100
  `}>
    {categories.map((category, index) => (
      <li key={index} className="text-medium hover:text-gray-500 font-normal w-full flex flex-row gap-1 
         hover:bg-[#faebd7] transition-all duration-500 ease-in
        px-4 py-2.5 list-none border border-[powderblue] bg-white text-green-600">
        <span>{category.icon}</span> <span>{category.name}</span>
      </li>
    ))}
  </div>
</div>