优化Next.js与TailwindCSS动态过渡：避免初始加载时的意外动画

"use client";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";

const Home = () => {
  const [visible, setVisible] = useState(false);
  const [transition, setTransition] = useState(false); // 初始为false

  useEffect(() => {
    const visibleState = Cookies.get("visibleState");
    visibleState && setVisible(!!visibleState); // 从Cookies加载可见性

    const transitionState = Cookies.get("transitionState");
    transitionState && setTransition(!!transitionState); // 从Cookies加载过渡状态（不推荐）

    // 尝试在组件卸载时重置transitionState，但不是根本解决方案
    return () => {
      Cookies.set("transitionState", "false");
    };
  }, []);

  const handleToggleVisibility = () => {
    Cookies.set("visibleState", String(!visible));
    setTransition(!transition); // 每次点击都切换transition状态
    setVisible(!visible);
  };

  return (
    <main>
      <button onClick={handleToggleVisibility}>Toggle Visibility</button>
      <div
        className={
          "mt-20 flex ... text-3xl font-light transition-all duration-700 " + // 注意这里的transition-all
          (visible ? "opacity-100" : "opacity-0") +
          (transition ? " transition-all duration-700" : "") // 这里的条件判断是多余的，且逻辑有误
        }
      >
        {/* 内容 */}
      </div>
    </main>
  );
};

export default Home;

<div
  className={
    `mt-20 flex h-2/6 flex-col items-center justify-center gap-[1px] text-3xl font-light ` +
    (visible ? "opacity-100" : "opacity-0") +
    (transition ? " transition-all duration-700" : "") // 仅当transition为true时才添加过渡类
  }
>
  {/* 内容 */}
</div>

"use client";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";

const Home = () => {
  const [visible, setVisible] = useState(false);
  // 使用一个更明确的名称，表示是否已启用过渡效果
  const [enableTransition, setEnableTransition] = useState(false);

  useEffect(() => {
    // 仅从Cookies加载可见性状态
    // 如果Cookies中存在"true"，则设置为true，否则为false
    setVisible(Cookies.get("visibleState") === "true");
    // 在初始加载时，enableTransition保持其初始值false，
    // 这样页面加载时不会有过渡效果。
  }, []); // 依赖项为空数组，表示只在组件挂载时运行一次

  const handleToggleVisibility = () => {
    // 在用户首次点击时，启用过渡效果
    // 之后，enableTransition会一直保持true
    if (!enableTransition) {
      setEnableTransition(true);
    }

    // 切换可见性状态并更新Cookies
    const newVisibleState = !visible;
    Cookies.set("visibleState", String(newVisibleState));
    setVisible(newVisibleState);
  };

  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}> who? </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 ` +
            (visible ? "opacity-100" : "opacity-0") +
            (enableTransition ? " transition-all duration-700" : "") // 条件应用过渡类
          }
        >
          <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"}> Contact </Link>
        <span className="text-slate-500">{"/>"}</span>
      </p>
    </main>
  );
};

export default Home;