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

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

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作