React+Tailwind导航链接显示/隐藏过渡效果失效问题求助

问题核心：你用max-md:hidden隐藏菜单时，hidden类对应display: none，CSS过渡无法作用在display属性上，导致动画完全不触发。

修改方案 #

用高度过渡替代display: none的方式来控制菜单显示/隐藏，因为max-height属性支持CSS过渡：

• 移除max-md:hidden类，改用max-h-0 overflow-hidden作为默认隐藏状态
• 当isVisible为true时，设置一个足够容纳菜单内容的max-h值（比如max-h-[500px]）
• 保留原有的过渡类transition-all duration-500 ease-in-out

修改后的完整代码 #

// imports
import { useState } from 'react';
import ImCross from 'react-icons/im';
import GiHamburgerMenu from 'react-icons/gi';

const Nav = () => {
  const [isVisible, setIsVisible] = useState(false);

  const handleButtonClick = () => {
    setIsVisible(!isVisible);
  };
  return (
    <nav className={`bg-gray-600 dark:bg-gray-950 fixed w-full top-0 z-10`}>
      <div className="flex flex-col md:flex-row container p-3 justify-between align-middle max-w-screen-xl mx-auto text-center">
        <div className="relative flex">
          {/* header logo */}
          <div className="absolute right-2 md:hidden">
            {isVisible ? (
              <ImCross
                alt="close menu"
                className="max-lg:block h-9 w-9 pt-2 text-white"
                onClick={handleButtonClick}
              />
            ) : (
              <GiHamburgerMenu
                className="max-lg:block h-9 w-9 pt-2 text-white"
                onClick={handleButtonClick}
              />
            )}
          </div>
        </div>
        <div>
          <ul
            className={`flex-1 flex max-md:flex-col gap-10 font-kanit text-white align-middle p-3 transition-all duration-500 ease-in-out max-md:overflow-hidden ${
              isVisible ? 'max-md:max-h-[500px]' : 'max-md:max-h-0'
            }`}
          >
            {/* navlinks 示例 */}
            <li>首页</li>
            <li>关于</li>
            <li>联系</li>
          </ul>
        </div>
      </div>
    </nav>
  );
};
export default Nav;

关键说明 #

• max-h-0让菜单默认高度为0，overflow-hidden隐藏超出内容，此时菜单不可见
• 当isVisible为true时，max-h-[500px]让菜单扩展到足够高度，过渡类会让这个高度变化过程平滑显示
• 大屏下（md:及以上）不受max-md:前缀限制，保持原有的flex布局，不影响桌面端显示

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