Tailwind CSS中transition-all异常：展开导航栏无过渡，收起时有过渡

问题出在你给导航栏ul设置的类上：展开状态下没有添加过渡相关样式，只有收起时才加了transition-all duration-500，所以展开时直接显示，没有过渡动画。

修复步骤： #

1. 把过渡类（transition-all duration-500）从收起状态的class里移出来，作为ul的固定类，确保展开和收起时都能触发过渡。
2. 展开时的max-h不要用max-h-screen，换成一个足够容纳导航内容的固定值（比如max-h-[500px]），避免max-h-screen和max-h-0之间的过渡异常。

修改后的完整代码： #

const Navbar = () => {
  const [nav, setNav] = useState(true)

  const handleNav = () => {
    setNav(!nav);
  }

  return (
    <div>
      <div className='flex justify-between hidden'>
        <img className='w-[140px] mx-3' src={dremslogo} alt='logo'></img>
        <ul className='flex'>
          <li className='p-6 py-10 text-xl'>Home</li>
          <li className='p-6 py-10 text-xl'>About</li>
          <li className='p-6 py-10 text-xl'>Features</li>
          <li className='p-6 py-10 text-xl'>Contact</li>
          <li className='p-6 ml-10 py-10 text-xl'>Register</li>
          <li className='p-6 py-10 text-xl'>Log in</li>
        </ul>
      </div>
      <div className='flex justify-between flex-wrap back'>
        <img className='w-[180px] p-5' src={dremslogo} alt='logo'></img>
        <div className='p-5 pt-9' onClick={handleNav}>
          {!nav ? <AiOutlineClose className='cursor-pointer' size={35} /> : <AiOutlineMenu className='cursor-pointer' size={35}/>}
        </div>
        <ul className={`w-[100%] overflow-hidden transition-all duration-500 ${!nav ? 'max-h-[500px]' : 'max-h-0'}`} onClick={handleNav}>
          <li className='p-3 px-5 text-xl'>Home</li>
          <li className='p-3 px-5 text-xl'>About</li>
          <li className='p-3 px-5 text-xl'>Features</li>
          <li className='p-3 px-5 text-xl'>Contact</li>
          <li className='p-3 px-5 text-xl'>Register</li>
          <li className='p-3 px-5 text-xl'>Log in</li>
        </ul>
      </div>
    </div>
  );
}

额外说明： #

• 过渡效果需要元素的属性有可计算的数值变化，max-h-0到max-h-[500px]是明确的数值区间，能正常触发过渡；而max-h-screen是相对视口的动态值，和max-h-0的过渡可能无法被浏览器正确计算。
• 把过渡类设为固定类，确保无论展开还是收起，元素都具备过渡能力，状态切换时就能平滑触发动画。

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