Next.js+Tailwind项目中CSS Transition不生效问题求助

组件代码 #

"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";

const NavigationBar = () => (
  <div id="navbar">
    <Link href="/">Home</Link>
    <Link href="/about">About</Link>
   
  </div>
);

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const togglebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="flex items-center justify-start px-4 border-gradient-bottom">
     
      <div className="flex text-l">
        <div className="hidden md:flex">
          <Nav />
        </div>
        <button
          className="flex md:hidden fixed right-8 top-8 h-4 bottom-20 z-40"
          onClick={() => togglebar()}
        >
          {isOpen ? (
             <div>open</div>
          ) : (
           <div>close</div>
          )}
        </button>
        {isOpen && (
          <div
            className={`h-full w-3/5 fixed right-0 z-30 transition-duration-300 ease-in-out ${
              isOpen ? "transform translate-x-0" : "transform translate-x-full"
            }`}
          >
            <NavigationBar />
          </div>
        )}
      </div>
    </div>
  );
};

export default Header;

问题描述 #

上述组件中的CSS Transition过渡动画在Next.js项目中无法正常生效。已在Codepen中使用原生JS测试该逻辑，过渡效果正常；且Tailwind配置无报错信息。预期效果是点击切换按钮时，导航栏能够平滑滑入。

原因及解决方法 #

核心原因

1. 条件渲染导致DOM不存在：当前代码通过{isOpen && ...}控制导航栏的渲染，初始状态下导航栏DOM元素不存在，过渡动画需要元素从一个样式状态平滑过渡到另一个，而非从无到有，因此无法触发动画。
2. Tailwind类名错误：transition-duration-300不是合法的Tailwind类，正确的类名应为transition-transform duration-300（指定仅对transform属性过渡）或transition-all duration-300（对所有可过渡属性生效）。

修复步骤

1. 始终渲染导航栏元素：移除条件渲染逻辑，改为通过类名控制导航栏的位置状态，保证DOM始终存在。
2. 修正Tailwind过渡类名：替换错误的过渡类，确保过渡属性和时长正确配置。
3. 调整初始样式：初始时导航栏处于translate-x-full（完全移出右侧视口），点击按钮后切换为translate-x-0。

修改后的完整代码

"use client";
import React, { useState } from "react";
import Link from "next/link";

const NavigationBar = () => (
  <div id="navbar" className="p-4 space-y-4">
    <Link href="/" className="block">Home</Link>
    <Link href="/about" className="block">About</Link>
  </div>
);

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const togglebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="flex items-center justify-start px-4 border-b">
      <div className="flex text-lg">
        {/* 修复原代码中<Nav />未定义的问题，替换为<NavigationBar /> */}
        <div className="hidden md:flex">
          <NavigationBar />
        </div>
        <button
          className="flex md:hidden fixed right-8 top-8 z-40"
          onClick={togglebar}
        >
          {isOpen ? <div>Close</div> : <div>Open</div>}
        </button>
        {/* 始终渲染导航栏，通过类名控制位置 */}
        <div
          className={`h-full w-3/5 fixed right-0 top-0 z-30 bg-white transition-transform duration-300 ease-in-out ${
            isOpen ? "translate-x-0" : "translate-x-full"
          }`}
        >
          <NavigationBar />
        </div>
      </div>
    </div>
  );
};

export default Header;

额外说明：给导航栏添加了基础内边距、间距和背景色，确保滑入时的可见性；同时修正了原代码中<Nav />未定义的错误。

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