React-TS(TSX)中TailwindCSS过渡动画失效问题求助

问题根源 #

你的代码存在两个核心问题导致过渡失效：

• 用{showSidebar && <nav .../>}做条件渲染，当showSidebar为false时，整个<nav>元素会被直接卸载，不存在的元素自然无法触发过渡动画。
• 过渡类transition-all仅在showSidebar为true时添加，切换状态时过渡规则被移除，动画无法执行。

修复方案 #

1. 始终渲染侧边栏元素，通过样式控制显隐 #

去掉条件渲染的&&逻辑，让<nav>始终存在，仅通过宽度、overflow等样式控制显示状态。

2. 确保过渡类始终存在 #

无论侧边栏是否展开，都保留transition-all及相关缓动、时长类，保证切换时过渡规则生效。

3. 处理内容溢出 #

侧边栏收缩时添加overflow-hidden，避免内部内容溢出显示。

修改后的组件代码 #

const Sidebar = () => {
  const [showSidebar, setShowSidebar] = React.useState(true);

  const onToggleSidebar = () => {
    setShowSidebar(!showSidebar);
  };

  return (
    <>
      {/* 始终渲染nav，通过className控制宽度和过渡 */}
      <nav
        className={`${
          showSidebar ? "w-64 px-6" : "w-0 px-0 overflow-hidden"
        } border-2 border-red-600 py-4 bg-white shadow-xl flex-row transition-all duration-300 ease-in-out`}
      >
        <div className="h-full flex flex-col justify-between">
          <div className="flex flex-col items-center ">
            <h2 className="font-bold">Henry</h2>
            <p className="text-gray-500">Email</p>
          </div>
          {/* 补充你原本的其他侧边栏内容 */}
        </div>
      </nav>
      {/* 添加切换按钮用于测试 */}
      <button onClick={onToggleSidebar} className="mt-4 p-2 bg-blue-500 text-white">
        切换侧边栏
      </button>
    </>
  );
};

Tailwind配置优化 #

你的safelist里的过渡类可以删除，Tailwind会自动扫描src目录下的TSX文件，识别用到的transition-all、duration-300等类，无需手动添加到安全列表。修改后的配置：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

额外说明 #

• 过渡时长可根据需求调整duration-300为duration-500等。
• 若需更细腻的动画效果，可配合opacity-100/opacity-0实现宽度+透明度的组合过渡。

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