50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Rotating Navigation (旋转导航)

📅 我们继续 50 个小项目挑战!------ Rotating Navigation 组件

仓库地址 :🔗https://github.com/SunACong/50-vue-projects
项目预览地址 :🔗https://50-vue-projects.vercel.app/


✨ 组件目标

  • 🌀 实现一个旋转按钮动画菜单,点击按钮后页面整体旋转并展示侧边菜单
  • 📱 菜单项带动画滑入效果,按钮提供"展开/关闭"两种状态
  • 🎯 运用 transitionrotate 动画提升用户交互体验

🧱 技术实现点

  • 使用 Vue 3 + ref 实现菜单状态管理
  • 使用 Tailwind CSS 实现旋转、位移、过渡、定位等动画效果
  • 组件内嵌头部内容模拟文章内容(用于旋转效果展示)
  • 左侧导航使用 translate-x 控制菜单显隐

🔧 RotatingNavigation.vue 组件实现

html 复制代码
<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

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

js 复制代码
{
        path: '/RotatingNavigationAnimation',
        name: 'RotatingNavigationAnimation',
        component: () => import('@/projects/RotatingNavigationAnimation.vue'),
    }

🚀 小结

本组件通过 rotatetranslate 结合 Vue 的响应式状态,构建出一个带旋转动效的侧边导航菜单。

  • 💡 利用 Tailwind 的 origin-top-left 实现旋转中心
  • 🎬 点击按钮时,实现 rotate + translate 的流畅转场动画
  • 🧠 实现简单逻辑切换,用户体验感强,交互感十足

每天造一个轮子,码力暴涨不是梦!🚀

相关推荐
林强18112 小时前
前端文件预览docx、pptx和xlsx
前端
计算机学姐12 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
像是套了虚弱散15 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan15 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇16 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦158816 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追17 小时前
Vue组件化开发
前端·html
艾德金的溪17 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长17 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH18 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js