如何避免TailwindCSS过渡效果在页面初始加载时触发？

要解决页面加载时从Cookie恢复状态触发不必要过渡的问题，核心思路是让初始渲染直接使用Cookie中的状态，避免后续状态更新触发过渡；仅在用户点击按钮时启用过渡效果。

关键修改步骤： #

1. 直接从Cookie初始化可见性状态
   不再在useEffect中设置visible状态，而是通过useState的初始化函数直接读取Cookie值。这样组件首次渲染就会使用保存的状态，不会因为后续状态更新触发过渡。

2. 添加用户交互追踪状态
   新增hasInteracted状态，用于判断用户是否点击过按钮。初始值为false，仅在首次点击按钮时设为true。

3. 条件性应用过渡类
   仅当hasInteracted为true时，才给目标div添加Tailwind的过渡类（transition-all duration-700），确保初始加载时无过渡效果，点击按钮后才启用过渡。

修改后的完整代码： #

"use client";
import { useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";

const Home = () => {
  // 直接从Cookie初始化可见性状态
  const [visible, setVisible] = useState(() => {
    const savedState = Cookies.get("visibleState");
    return savedState ? JSON.parse(savedState) : false;
  });
  
  // 追踪用户是否已点击过按钮
  const [hasInteracted, setHasInteracted] = useState(false);

  const handleToggleVisibility = () => {
    setHasInteracted(true);
    const newVisible = !visible;
    Cookies.set("visibleState", String(newVisible));
    setVisible(newVisible);
  };

  return (
    <main className="flex h-5/6 flex-col justify-between">
      {/* Who section */}
      <section>
        <div className="flex h-1/6 items-center justify-center text-3xl font-light">
          <span className="text-slate-500">{`< `}</span>
          <button onClick={handleToggleVisibility}>&nbsp;who?&nbsp;</button>
          <span className="text-slate-500">{` />`}</span>
        </div>

        <div
          className={`mt-20 flex h-2/6 flex-col items-center justify-center gap-[1px] text-3xl font-light 
            ${hasInteracted ? "transition-all duration-700" : ""} 
            ${visible ? "opacity-100" : "opacity-0"}`}
        >
          <Link
            href="/dev"
            className="mx-auto w-1/4 border border-black p-4 text-center transition-all duration-300 hover:border-slate-500 active:bg-slate-800"
          >
            Software developer
          </Link>
          <Link
            href="/books"
            className="mx-auto w-1/4 border border-black p-4 text-center transition-all duration-300 hover:border-slate-500 active:bg-slate-800"
          >
            Reader
          </Link>
          <Link
            href="/dreams"
            className="mx-auto w-1/4 border border-black p-4 text-center transition-all duration-300 hover:border-slate-500 active:bg-slate-800"
          >
            Dreamer
          </Link>
        </div>
      </section>

      {/* Contact footer */}
      <p className="flex items-center justify-center p-6 text-2xl tracking-widest">
        <span className="text-slate-500">{`<`}</span>
        <Link href="/contact">&nbsp;Contact&nbsp;</Link>
        <span className="text-slate-500">{`/>`}</span>
      </p>
    </main>
  );
};

export default Home;

说明： #

• 初始加载时，hasInteracted为false，目标div没有过渡类，因此从Cookie恢复状态时不会触发动画。
• 用户首次点击按钮后，hasInteracted变为true，过渡类被添加，后续所有切换操作都会触发Tailwind的过渡效果。
• 直接通过useState初始化函数读取Cookie，避免了组件挂载后的状态更新，消除了初始过渡的触发源。

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