本教程旨在解决Next.js应用中，使用Tailwindcss动态控制元素可见性时，如何避免在页面初次加载或状态从Cookies恢复时触发不必要的过渡动画。核心在于通过分离ui状态与动画启用状态，并利用条件类名和react的useEffect钩子，确保过渡仅在用户交互时发生，从而提供更流畅的用户体验。
理解问题：初次加载时的意外过渡
在开发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的过渡类。
<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") + // 只有当 transitionEnabled 为 true 时，才应用过渡类 (transitionEnabled ? " transition-all duration-700" : "") } > {/* ... 子元素 */} </div>
完整示例代码
结合上述修改，完整的组件代码如下：
"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 ( <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") + // 只有当 transitionEnabled 为 true 时，才应用过渡类 (transitionEnabled ? " 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;
注意事项与最佳实践
- 状态分离的重要性： 这个问题的核心在于区分“元素应处于何种状态”和“元素如何达到这种状态”。visible是前者的体现，transitionEnabled是后者的体现。
- 避免在持久化存储中保存瞬时UI状态： transitionEnabled是一个瞬时状态，只在用户交互时有意义。将其存储在Cookies中是冗余且可能导致意外行为的。只有需要跨会话保留的数据才应存入Cookies。
- 首次渲染无过渡： 通过在useEffect中不设置transitionEnabled，可以确保组件在首次渲染时，即使visible状态是从Cookies中恢复的，也不会有过渡效果。过渡只会在用户首次点击按钮后才被激活。
- TailwindCSS类名拼接： 在React中动态生成TailwindCSS类名时，可以使用模板字符串或clsx等库来提高可读性和维护性。
总结
通过将UI状态与动画启用状态解耦，并利用React的useState和useEffect钩子以及TailwindCSS的条件类名，我们成功解决了Next.js应用中动态过渡在初次加载时意外触发的问题。这种方法确保了过渡效果只在用户主动交互时发生，从而提供了更精确、更符合预期的用户体验。这种模式在处理其他动态UI效果时也具有广泛的适用性。
评论（已关闭）
评论已关闭