使用Tailwind CSS和Framer Motion创建活动链接动画
When designing a one-page website, it’s often helpful to provide users with a visual indicator of their current location on the page. One elegant way to achieve this is by implementing an animated active link in your navigation menu.
在设计单页网站时，为用户提供当前位置的视觉指示通常是很有帮助的。一种优雅的实现方式是在导航菜单中实现动画活动链接。
This tutorial will guide you through creating a sliding active link animation using Next.js, Tailwind CSS, and Framer Motion. We’ll develop a navigation menu where the active link is highlighted with a sliding background.
本教程将指导您使用Next.js、Tailwind CSS和Framer Motion创建一个滑动的活动链接动画。我们将开发一个导航菜单，其中活动链接将以滑动背景的形式突出显示。
Let’s get started!
让我们开始吧！
Setting up the project
设置项目
We’ll use Next.js with the App Router for this project. Here’s how we’ll structure our main components:
我们将在这个项目中使用Next.js和App Router。这是我们如何构建我们的主要组件结构：
- A page component to hold everything together
- 一个页面组件来将所有内容组合在一起
- A navigation provider to manage the active link state
- 一个导航提供者来管理活动链接状态
- A navigation menu component
- 一个导航菜单组件
- A section component for each part of the page
- 每个页面部分都有一个部分组件
Let’s break down each part.
让我们逐个解释每个部分。
The page component
页面组件
In the page.tsx file, we’ll define our page sections:
在page.tsx文件中，我们将定义我们的页面部分：
const sections = [ { title: "Home", slug: "home" }, { title: "Customers", slug: "customers" }, { title: "Partners", slug: "partners" }, { title: "Team", slug: "team" }
];
Then, we’ll set up our main page component:
然后，我们将设置我们的主页面组件：
export default function SlidingActiveLinkPage() { return ( <main className="relative flex min-h-screen flex-col overflow-hidden bg-slate-50"> <NavProvider> <NavigationMenu links={sections} /> <div className="w-full max-w-5xl mx-auto px-4 md:px-6"> {sections.map((section) => ( <Section key={section.slug} section={section} /> ))} </div> </NavProvider> </main> );
}
This component serves as the main structure for our one-page website. It includes the NavigationMenu and Section client components, both wrapped in a NavProvider, that allows us to manage the state of the active section across di...