Tailwind CSS 动态列表项的过渡效果不起作用

Question

为什么在使用 Tailwind CSS 的 React 中，平滑过渡效果无法实现？当鼠标点击分类栏时，隐藏的列表组未能从顶部到底部平滑显示。这是我的代码：


   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]'>
     Categories
    
  

  
    {categories.map((category, index) => (
      
        {category.icon} {category.name}
      
    ))}

这个是我的代码输入

Shog9 · Answer

为实现过渡效果，为菜单列表添加高度类名：className={${show ? 'h-[200px]' : 'h-[0]'} sm:h-auto top-[10vh] overflow-hidden transition-all duration-500 ease-in ...others}

Salman A · Answer

起初，您尝试通过使用 show 状态和 hidden 类来切换类别列表的可见性，这会将 display 属性设置为 none，而在此处 display 属性是不可动画化的。

为此，您需要利用 opacity 和 transform 属性（当然还要结合 visibility classes）。以下是您代码的更新版本：