理解问题：初次加载时的意外过渡
在开发web应用时，我们经常需要根据用户交互或持久化状态来动态改变元素的样式，例如通过点击按钮切换元素的显示/隐藏，并伴随过渡效果。当使用next.js和tailwindcss实现这类功能，并利用js-cookie等库将元素可见性状态存储在浏览器cookies中时，一个常见的问题是：当用户首次访问页面或重新加载页面时，即使状态是从cookies中恢复的，元素也会播放一次过渡动画，这通常不是我们期望的行为。我们希望过渡只在用户主动点击按钮时发生，而不是在页面初始化加载时。
造成这个问题的主要原因在于，过渡相关的TailwindCSS类（如transition-all duration-700）被无条件地应用到了元素上，或者在状态初始化时就激活了过渡。
解决方案：分离状态与条件应用过渡
要解决此问题，关键在于将元素的可见性状态（visible）与控制过渡是否启用的状态（transitionEnabled）进行分离。只有当用户通过交互（例如点击按钮）触发状态变化时，才同时激活过渡效果。
1. 调整组件状态管理
我们需要两个独立的React useState 钩子来管理这两种状态：
- visible: 控制元素的实际可见性（opacity-100 或 opacity-0）。这个状态需要从Cookies中读取和保存。
- transitionEnabled: 一个布尔值，用于控制是否将TailwindCSS的过渡类应用到元素上。这个状态不需要存储在Cookies中，它只在组件内部管理，并在用户交互时设置为true。
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
const Home = () => {
const [visible, setVisible] = useState(false);
// 新增一个状态来控制过渡是否启用
const [transitionEnabled, setTransitionEnabled] = useState(false);
// ... (其他代码)
};2. useEffect 钩子：初始化状态
在组件挂载时，useEffect 钩子负责从Cookies中读取visible状态。重要的是，在这个阶段，我们不应该设置transitionEnabled为true，因为这会立即触发过渡。
立即学习“前端免费学习笔记（深入）”；
useEffect(() => {
// 从Cookies中读取可见性状态
const visibleState = Cookies.get("visibleState");
if (visibleState === "true") {
setVisible(true);
} else {
setVisible(false);
}
// 注意：在此处不设置 setTransitionEnabled(true)
}, []);这里我们简化了 visibleState && setVisible(!!visibleState); 的写法，直接进行字符串比较，因为 Cookies.get 返回的是字符串或 undefined。
3. handleToggleVisibility 函数：触发交互与过渡
当用户点击按钮时，我们需要做三件事：
- 切换visible状态。
- 将新的visible状态保存到Cookies中。
- 最关键的是，将transitionEnabled设置为true。 这样，下一次渲染时，过渡类就会被应用，并且由于visible状态也同时改变，过渡效果就会被激活。
const handleToggleVisibility = () => {
const newVisibleState = !visible;
Cookies.set("visibleState", String(newVisibleState)); // 保存到Cookies
setVisible(newVisibleState); // 更新可见性状态
setTransitionEnabled(true); // 启用过渡效果
};4. 条件应用 TailwindCSS 过渡类
最后一步是修改div元素的className属性，使其根据transitionEnabled状态条件性地应用TailwindCSS的过渡类。
{/* ... 子元素 */}
完整示例代码
结合上述修改，完整的组件代码如下：
"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import Cookies from "js-cookie";
const Home = () => {
const [visible, setVisible] = useState(false);
const [transitionEnabled, setTransitionEnabled] = useState(false); // 控制过渡是否启用
useEffect(() => {
// 从Cookies中读取可见性状态
const visibleState = Cookies.get("visibleState");
if (visibleState === "true") {
setVisible(true);
} else {
setVisible(false);
}
// 在初始加载时不启用过渡，避免不必要的动画
}, []);
const handleToggleVisibility = () => {
const newVisibleState = !visible;
Cookies.set("visibleState", String(newVisibleState)); // 保存到Cookies
setVisible(newVisibleState); // 更新可见性状态
setTransitionEnabled(true); // 用户交互时启用过渡效果
};
return (
{/* Who section */}
{"< "}
{" />"}
Software developer
Reader
Dreamer
{/* Contact footer */}
{"<"}
Contact
{"/>"}
);
};
export default Home;注意事项与最佳实践
- 状态分离的重要性： 这个问题的核心在于区分“元素应处于何种状态”和“元素如何达到这种状态”。visible是前者的体现，transitionEnabled是后者的体现。
- 避免在持久化存储中保存瞬时UI状态： transitionEnabled是一个瞬时状态，只在用户交互时有意义。将其存储在Cookies中是冗余且可能导致意外行为的。只有需要跨会话保留的数据才应存入Cookies。
- 首次渲染无过渡： 通过在useEffect中不设置transitionEnabled，可以确保组件在首次渲染时，即使visible状态是从Cookies中恢复的，也不会有过渡效果。过渡只会在用户首次点击按钮后才被激活。
- TailwindCSS类名拼接： 在React中动态生成TailwindCSS类名时，可以使用模板字符串或clsx等库来提高可读性和维护性。
总结
通过将UI状态与动画启用状态解耦，并利用React的useState和useEffect钩子以及TailwindCSS的条件类名，我们成功解决了Next.js应用中动态过渡在初次加载时意外触发的问题。这种方法确保了过渡效果只在用户主动交互时发生，从而提供了更精确、更符合预期的用户体验。这种模式在处理其他动态UI效果时也具有广泛的适用性。
