1. 问题背景：初始加载时的意外过渡
在开发交互式web应用时，我们经常需要根据用户操作或持久化状态来动态改变元素的样式。例如，一个按钮点击后显示/隐藏一个div，并伴随透明度过渡效果。为了保持用户体验，我们可能会将元素的可见性状态存储在cookies中，以便用户下次访问时能恢复到上次的状态。
然而，当页面重新加载并从Cookies中读取状态时，如果过渡样式被无条件地应用，元素会立即从其默认状态（例如opacity-0）过渡到恢复后的状态（例如opacity-100），从而产生一次不必要的、可能令人困惑的动画。这通常不是我们希望的行为，我们期望动画只在用户主动交互时发生。
考虑以下初始代码片段，它尝试使用visible和transition两个状态来控制元素的可见性和过渡：
"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 (
{/* 内容 */}
);
};
export default Home;上述代码存在两个主要问题：
- 过渡类无条件应用： div元素的className中，transition-all duration-700被直接包含在字符串中，这意味着无论transition状态如何，这个过渡效果都会被应用。
- 过渡状态管理复杂且不必要： 尝试将transition状态也存储在Cookies中，并每次点击都切换它，这增加了不必要的复杂性，且未能解决初始加载问题。我们通常只需要在用户首次交互后才启用过渡。
2. 解决方案：条件化过渡类与精简状态管理
要解决上述问题，我们需要采取以下两个关键步骤：
立即学习“前端免费学习笔记（深入）”；
2.1 仅在需要时应用过渡类
首先，确保transition-all和duration-xxx等过渡相关的TailwindCSS类只在我们希望动画发生时才被添加到元素的className中。这需要一个独立的状态来控制过渡的启用。
修改div元素的className：
将transition-all duration-700从静态字符串中移除，并将其与transition状态（或更清晰的命名如enableTransition）绑定。
{/* 内容 */}
通过这种方式，当transition状态为false时，div元素将不会包含任何过渡相关的CSS类，从而避免了初始加载时的动画。
2.2 优化状态管理
其次，我们需要简化visible和transition状态的管理逻辑。transition状态无需存储在Cookies中，它应该在组件首次渲染时为false，并在用户首次点击交互后设置为true，此后一直保持true。
修改useEffect和handleToggleVisibility函数：
"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 (
{/* Who section */}
{"< "}
{" />"}
Software developer
Reader
Dreamer
{/* Contact footer */}
{"<"}
Contact
{"/>"}
);
};
export default Home;代码解析：
- useState(false) for enableTransition： enableTransition状态初始化为false。这意味着在组件首次渲染时，div元素不会包含transition-all duration-700类。
- useEffect： 只负责从Cookies中加载visible状态。它不会触及enableTransition状态，因此在页面初始加载时，enableTransition保持false，从而避免了过渡。
-
handleToggleVisibility：
- 在切换visible状态之前，首先检查enableTransition是否为false。如果是，则将其设置为true。这样确保了只有在用户首次点击时才启用过渡效果。
- 一旦enableTransition被设置为true，它就会一直保持true，后续的点击都会带有过渡效果。
- visible状态的切换和Cookies更新照常进行。
3. 注意事项与总结
- 单一职责原则： visible状态负责元素的可见性，enableTransition状态负责控制过渡效果的启用。将这两个职责分开，使得逻辑更清晰。
- 避免不必要的Cookies存储： 过渡效果的启用状态（enableTransition）通常不需要持久化。它应该在每次页面加载时重新初始化为false，并在用户交互时激活。
- 条件渲染与条件类： TailwindCSS的强大之处在于可以轻松地通过条件逻辑添加或移除CSS类。利用这一点来精确控制何时应用过渡效果。
- 用户体验： 避免初始加载时的意外动画可以提升用户体验，让页面内容以更自然的方式呈现。
通过以上优化，我们成功地实现了在Next.js应用中，结合TailwindCSS和React状态管理，仅在用户交互时才触发过渡动画，同时保持状态的持久化，从而提供更流畅、更可控的用户体验。
