Tailwind CSS中Navbar过渡动画不生效，寻求解决方案

你的代码示例 #

const [showNav, setShowNav] = useState(false)

const toggleNavItems = () => {
    setShowNav(!showNav)
}
console.log(showNav)

<ul className="sm:hidden">
            <li className="px-2 md:px-4" onClick={toggleNavItems}>
                <div className="text-purple-600 font-semibold hover:text-purple-500 text-3xl cursor-pointer">
                    <FaBars />
                </div>
            </li>
        </ul>
   
        <div className={`overflow-hidden transition-all duration-500 ease-in ${showNav ? 'block absolute w-full top-[60px] right-0' : "hidden"}`}>
            <ul>
                <li className='p-4'>
                    <Link to={'/'} className='text-purple-600 font-semibold hover:text-purple-500'>
                        {" "}
                        Home{" "}
                    </Link>
                </li>
            </ul>
        </div>

问题原因 #

核心问题是**hidden类会直接将元素的display设为none，而CSS过渡不支持display属性的变化**，所以切换时元素会直接显示/隐藏，完全跳过过渡动画。

解决方案 #

不要用hidden和block控制显示状态，改用max-height属性的变化来实现过渡——CSS过渡可以作用于这类可计算的数值属性。

修改后的代码如下：

const [showNav, setShowNav] = useState(false)

const toggleNavItems = () => {
    setShowNav(!showNav)
}
console.log(showNav)

<ul className="sm:hidden">
            <li className="px-2 md:px-4" onClick={toggleNavItems}>
                <div className="text-purple-600 font-semibold hover:text-purple-500 text-3xl cursor-pointer">
                    <FaBars />
                </div>
            </li>
        </ul>
   
        <div className={`absolute w-full top-[60px] right-0 overflow-hidden transition-all duration-500 ease-in ${showNav ? 'max-h-96' : "max-h-0"}`}>
            <ul>
                <li className='p-4'>
                    <Link to={'/'} className='text-purple-600 font-semibold hover:text-purple-500'>
                        {" "}
                        Home{" "}
                    </Link>
                </li>
            </ul>
        </div>

修改说明 #

• 移除了block和hidden，改用max-h-96（设置一个足够容纳导航内容的最大高度）和max-h-0来控制显示隐藏
• 保留原有布局类确保导航位置正确
• overflow-hidden配合max-height的变化，实现平滑的展开/收起过渡

如果导航内容高度固定，也可以用height属性替代max-height，但max-height更适合内容高度不确定的场景。

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