50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | AnimatedNavigation（动态导航）
📅 我们继续 50 个小项目挑战！—— AnimatedNavigation组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
在本篇文章中，我们将使用 Vue 3 的 <script setup> 语法和 TailwindCSS 构建一个具有优雅折叠动画效果的响应式导航栏。该导航栏支持点击按钮切换展开与收起状态，并为菜单项添加了过渡动画。
🎯 组件目标
- 创建一个可交互的导航栏。
- 支持点击按钮展开/收起菜单。
- 菜单项具备入场动画效果。
- 使用 TailwindCSS 快速构建现代 UI 界面。
- 添加背景色块提升整体视觉层次感。
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 Composition API (<script setup>) | 使用响应式变量管理组件状态 |
ref 和 toggle 方法 | 控制导航栏展开/收起状态 |
v-for 渲染菜单项 | 动态生成多个导航链接 |
:class 动态绑定类名 | 根据状态切换样式 |
transition 动画类 | 使用 TailwindCSS 实现平滑过渡 |
| 自定义 CSS 动画 | 增强菜单项的出场/入场效果 |
🧱 组件实现
模板结构 <template>
<template><div class="relative min-h-screen overflow-hidden"><!-- 上半部分背景 --><div class="absolute top-0 left-0 z-0 h-1/2 w-full bg-sky-200"></div><!-- 下半部分背景 --><div class="absolute bottom-0 left-0 z-0 h-1/2 w-full bg-blue-500"></div><!-- 主体内容 --><div class="relative z-10 flex min-h-screen items-center justify-center"><nav:class="['flex items-center justify-between overflow-hidden rounded-md bg-white p-5 shadow-md transition-all duration-500',isActive ? 'w-[350px]' : 'w-[80px]',]"><ul:class="['flex overflow-hidden transition-all duration-500',isActive ? 'w-full' : 'w-0',]"><liv-for="(item, index) in menuItems":key="index":class="['transform transition-all duration-500',isActive ? 'rotate-[360deg] opacity-100' : 'rotate-0 opacity-0',]"><a href="#" class="mx-2 whitespace-nowrap text-black">{{ item }}</a></li></ul><button class="relative h-8 w-8" @click="toggleNav"><span:class="['absolute top-[10px] left-[5px] h-[2px] w-5 bg-[#5290f9] transition-transform duration-500',isActive ? 'translate-y-[5.5px] rotate-[-765deg]' : '',]"></span><span:class="['absolute bottom-[9px] left-[5px] h-[2px] w-5 bg-[#5290f9] transition-transform duration-500',isActive ? '-translate-y-[5.5px] rotate-[765deg]' : '',]"></span></button></nav></div></div>
</template>
脚本逻辑 <script setup>
<script setup>
import { ref } from 'vue'const isActive = ref(true)const toggleNav = () => {isActive.value = !isActive.value
}const menuItems = ['Home', 'Works', 'About', 'Contact']
</script>
样式增强 <style scoped>
<style scoped>
li {transition:transform 0.6s,opacity 0.6s;
}
</style>
🔍 重点效果实现
✅ 导航栏展开与收起
我们通过 isActive 响应式变量控制导航栏宽度：
const isActive = ref(true)
const toggleNav = () => {isActive.value = !isActive.value
}
并结合 Tailwind 的 transition-all duration-500 类实现平滑的宽度变化动画。
🎭 菜单项动画展示
当导航栏处于展开状态时，菜单项会从隐藏状态旋转并显示出来：
<li:class="['transform transition-all duration-500',isActive ? 'rotate-[360deg] opacity-100' : 'rotate-0 opacity-0',]">
💡 自定义按钮动画
按钮由两个 <span> 构成，代表“汉堡图标”。通过 translate 和 rotate 实现点击后变为“X”的动画效果：
<span:class="['absolute top-[10px] left-[5px] h-[2px] w-5 bg-[#5290f9] transition-transform duration-500',isActive ? 'translate-y-[5.5px] rotate-[-765deg]' : '',]"></span>
<span:class="['absolute bottom-[9px] left-[5px] h-[2px] w-5 bg-[#5290f9] transition-transform duration-500',isActive ? '-translate-y-[5.5px] rotate-[765deg]' : '',]"></span>
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
min-h-screen | 最小高度为视口全高 |
overflow-hidden | 隐藏超出容器的内容 |
relative, absolute | 定位背景层和导航栏 |
z-0, z-10 | 设置层级关系，确保导航栏在最上层 |
flex, items-center, justify-center | 居中布局导航栏 |
rounded-md, shadow-md | 添加圆角和阴影 |
bg-white, bg-sky-200, bg-blue-500 | 设置不同区域的背景颜色 |
p-5 | 内边距为 1.25rem |
transition-all duration-500 | 过渡动画持续时间为 0.5 秒 |
whitespace-nowrap | 防止文字换行 |
h-8, w-8 | 设置按钮大小为 2rem × 2rem |
这些 Tailwind 工具类帮助我们快速构建了一个现代、动态的导航栏组件。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 14,title: 'Animated Navigation',image: 'https://50projects50days.com/img/projects-img/14-animated-navigation.png',link: 'AnimatedNavigation',},
router/index.js 中添加路由选项：
{path: '/AnimatedNavigation',name: 'AnimatedNavigation',component: () => import('@/projects/AnimatedNavigation.vue'),},
🏁 总结
涵盖 Vue 3 的响应式系统、条件渲染、动态类绑定以及 TailwindCSS 的丰富动画能力。
👉 下一篇，我们将完成IncrementingCounter组件，一个动态的订阅增长逐渐过渡到最终的目标值！🚀