50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Rotating Navigation （旋转导航）
📅 我们继续 50 个小项目挑战！—— Rotating Navigation 组件
仓库地址：🔗https://github.com/SunACong/50-vue-projects
项目预览地址：🔗https://50-vue-projects.vercel.app/
✨ 组件目标
- 🌀 实现一个旋转按钮动画菜单，点击按钮后页面整体旋转并展示侧边菜单
- 📱 菜单项带动画滑入效果，按钮提供“展开/关闭”两种状态
- 🎯 运用
transition与rotate动画提升用户交互体验
🧱 技术实现点
- 使用 Vue 3 +
ref实现菜单状态管理 - 使用 Tailwind CSS 实现旋转、位移、过渡、定位等动画效果
- 组件内嵌头部内容模拟文章内容（用于旋转效果展示）
- 左侧导航使用
translate-x控制菜单显隐
🔧 RotatingNavigation.vue 组件实现
<template><div:class="['origin-top-left bg-white transition-all duration-500 ease-in-out',turnRotate ? '-rotate-30' : 'rotate-0',]"><div:class="['fixed -top-20 -left-20 transition-all duration-700 ease-in-out',turnRotate ? '-rotate-[65deg]' : 'rotate-0',]"@click="turnRotate = !turnRotate"><div class="h-40 w-40 rounded-full bg-fuchsia-300 text-white"><button class="absolute right-10 bottom-7 text-3xl">≡</button><button class="absolute bottom-8 left-8 text-3xl">×</button></div></div><div class="mx-28 flex flex-col items-start gap-2 px-50 pt-30"><h1 class="head-text">Amazing Article</h1><small>Florin Pop</small><p class="base-text mt-4">Lorem ipsum dolor sit amet consectetur adipisicing elit...（略）</p><h3 class="sub-text mt-4">My Dog</h3><imgsrc="https://images.unsplash.com/photo-1507146426996-ef05306b995a"alt="doggy" /><p class="base-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit...（略）</p></div></div><div><nav:class="['fixed bottom-40 left-0 z-10 text-white transition-all duration-500 ease-in-out',turnRotate ? 'translate-x-0' : '-translate-x-[200px]',]"><ul class="list-none pl-8"><li class="my-10 uppercase transition-all duration-500 ease-in">🏠 <a href="#">Home</a></li><li class="my-10 translate-x-4/12 uppercase transition-all duration-500 ease-in">👋 <a href="#">About</a></li><li class="my-10 translate-x-8/12 uppercase transition-all duration-500 ease-in">📧 <a href="#">Contact</a></li></ul></nav></div>
</template><script setup></script>
💡 Tailwind CSS 样式重点讲解
| 类名 | 说明 |
|---|---|
rotate-0 / -rotate-30 | 控制容器旋转角度 |
transition-all duration-500 | 添加平滑过渡动画 |
translate-x-0 / -translate-x-[200px] | 控制菜单移入移出位置 |
fixed / absolute | 控制定位，便于按钮和菜单固定显示位置 |
ease-in-out / ease-in | 设置动画速率函数 |
rounded-full / bg-fuchsia-300 | 控制按钮样式 |
🦌 常量定义 + 组件路由
constants/index.js
export const projectList = [{id: 3,title: 'Rotating Navigation Animation',image: 'https://50projects50days.com/img/projects-img/3-rotating-navigation-animation.png',link: 'RotatingNavigationAnimation',}
]
router/index.js
{path: '/RotatingNavigationAnimation',name: 'RotatingNavigationAnimation',component: () => import('@/projects/RotatingNavigationAnimation.vue'),}
🚀 小结
本组件通过 rotate 和 translate 结合 Vue 的响应式状态，构建出一个带旋转动效的侧边导航菜单。
- 💡 利用 Tailwind 的
origin-top-left实现旋转中心 - 🎬 点击按钮时，实现
rotate + translate的流畅转场动画 - 🧠 实现简单逻辑切换，用户体验感强，交互感十足
📅 明日预告：Hidden Search Widget！用一个按钮展开搜索框。
每天造一个轮子，码力暴涨不是梦！🚀