React+Tailwind CSS导航栏过渡动画失效问题求助

使用React + Tailwind CSS开发应用时，创建了一个包含5个元素的ToolBar组件：

• 屏幕宽度较大时，显示4个元素+左侧标题
• 屏幕缩小时，隐藏3个元素，仅显示左侧标题和右侧汉堡菜单（≡）
• 点击汉堡菜单时，原本隐藏的3个元素应该显示，但为这些元素设置的transition过渡动画完全不生效，怀疑和React组件重载有关。

ToolBar组件代码：

import React, { useState } from 'react';
import { ToolBarItem } from "./toolBarElement";

export function ToolBar() {
    const [menuOpen, setMenuOpen] = useState(false)

    return (
        <nav className="h-[60px] sm:h-[70px] md:h-[80px] w-full shadow-2xl">
            <ul className="flex md:space-x-4  mr-[60px] justify-end">
                <li className="grid items-center h-[60px] sm:h-[70px] md:h-[80px] absolute top-0 left-[30px]">
                    <h1 className='font-rowdies text-2xl text-black'>Example text</h1>
                </li>

                <li className="grid items-center md:hidden h-[50px] sm:h-[60px] absolute top-0 right-[40px]">
                    <h1 onClick={() => setMenuOpen(!menuOpen)} className="font-rowdies text-4xl text-black ">≡</h1>
                </li>

                <ToolBarItem link="/" text="About me" menuOpen={menuOpen} />
                <ToolBarItem link="/about" text="Projects" menuOpen={menuOpen} />

                <li className="grid items-center h-[60px] sm:h-[70px] md:h-[80px]">
                    <button style={{ transition: 'all 1s' }} className={`text-white font-bold md:block py-[5px] md:py-[10px] px-[15px] bg-red-600 border-red-600 border rounded-[6px] shadow-red ${menuOpen ? '' : 'hidden'}`}>Resume</button>
                </li>
            </ul>
        </nav>
    );
}

ToolBarItem组件代码：

export function ToolBarItem({ link, text, menuOpen }) {
    return (
        <li className='grid items-center h-[60px] sm:h-[70px] md:h-[80px]'>
            <a style={{ transition: 'all 1s' }} className={`font-rowdies text-2xl text-black mx-[20px] md:block ${menuOpen ? '' : 'hidden'}`} href={link}>{text}</a>
        </li>
    )
}

问题根源 #

过渡动画不生效和React组件重载无关，核心原因是**hidden类本质是display: none，CSS过渡无法作用于display属性的变化**——display: none会直接将元素从DOM渲染流中移除，没有可供过渡的中间状态，因此设置的transition完全无效。

修复方案 #

改用opacity（透明度）+ visibility（可见性）组合来控制元素显示/隐藏，这两个属性支持CSS过渡，同时保留元素在DOM流中的位置：

1. 移除hidden类，替换为：
   • 隐藏状态：opacity-0 invisible transition-all duration-1000
   • 显示状态：opacity-100 visible transition-all duration-1000
2. 移除内联的style={{ transition: 'all 1s' }}，改用Tailwind内置的过渡类更贴合框架用法。

修改后的代码 #

ToolBarItem组件

export function ToolBarItem({ link, text, menuOpen }) {
    return (
        <li className='grid items-center h-[60px] sm:h-[70px] md:h-[80px]'>
            <a className={`font-rowdies text-2xl text-black mx-[20px] md:block transition-all duration-1000 ${menuOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`} href={link}>{text}</a>
        </li>
    )
}

ToolBar组件中的按钮部分

<li className="grid items-center h-[60px] sm:h-[70px] md:h-[80px]">
    <button className={`text-white font-bold md:block py-[5px] md:py-[10px] px-[15px] bg-red-600 border-red-600 border rounded-[6px] shadow-red transition-all duration-1000 ${menuOpen ? 'opacity-100 visible' : 'opacity-0 invisible'}`}>Resume</button>
</li>

额外优化（可选） #

如果希望元素有滑入/滑出的动画，可以结合transform属性：

• 隐藏状态增加translate-x-full（从右侧滑出）或translate-y-full（从下方滑出）
• 显示状态移除该类，配合过渡类实现更丰富的动画效果

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