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 的流畅转场动画
  • 🧠 实现简单逻辑切换,用户体验感强,交互感十足

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

相关推荐
搏博12 分钟前
WPS JS宏实现去掉文档中的所有空行
开发语言·javascript·wps
逃逸线LOF21 分钟前
CSS之网页元素的显示与隐藏(旧土豆网遮罩案例)
前端·css
_xaboy37 分钟前
开源表单设计器FcDesigner配置多语言教程
前端·vue.js·低代码·开源·表单设计器
文艺倾年1 小时前
【系统架构师】2025论文《WEB系统性能优化技术》
前端·性能优化·系统架构
铃木隼.1 小时前
Web技术与Nginx网站环境部署
前端·nginx·php
郭尘帅6661 小时前
Vue3 父子组件传值, 跨组件传值,传函数
前端·javascript·vue.js
北漂老男孩1 小时前
JavaScript 性能优化实战指南
开发语言·javascript·性能优化
charlee441 小时前
使用Vite创建一个动态网页的前端项目
前端·javascript·vite
PegasusYu2 小时前
Electron使用WebAssembly实现CRC-8 ITU校验
javascript·electron·wasm·webassembly·itu·crc8·crc-8
SnowDreamXUE2 小时前
快速搭建一个electron-vite项目
前端·electron