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>
      <img
        src="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！用一个按钮展开搜索框。

每天造一个轮子，码力暴涨不是梦！🚀