当前位置：网站首页 > 技术文章 > 正文

JS 打造丝滑手风琴_js 打造丝滑手风琴教程

myzbx 2025-09-14 23:24 60 浏览

手风琴菜单是后台与官网的常客，但 90% 的实现依赖第三方库或 CSS Transition。今天原生 JS 手写一条「高度动画 + 状态机」的完整链路，打造丝滑手风琴效果。

效果预览

一、核心思路

高度动画：把 height: 0 <-> 实际高度交给逐帧函数 createAnimation
状态机：用自定义属性 status="closed|opened|playing" 避免并发点击
复用：任意html代码结构插上即用，零配置

二、代码速览

1.动画引擎（animate.js）

实现从一个初始值到目标值的平滑过渡效果，每帧更新一次视图。

函数参数（配置项）

from：动画起始值（如初始位置、初始透明度等）
to：动画目标值（最终要达到的数值）
totalMS：动画总时长（默认 300 毫秒，即 0.3 秒）
onmove：每帧更新时的回调函数（接收当前动画值，用于实时更新视图，比如 DOM 位置、样式等）
onend：动画结束时的回调函数（可选，动画完成后执行）

2.交互逻辑（index.js）

关键设计思路

用 status 属性（closed/opened/playing）管理子菜单状态，避免动画过程中重复触发点击事件
子菜单高度通过 “选项数量 × 单个高度” 动态计算，适配不同数量的子菜单
点击新菜单时自动关闭已打开的菜单，保证同一时间只有一个子菜单处于展开状态

3.样式骨架

<ul class="menu-container">
  <li class="menu">
    <h2>菜单1</h2>
    <ul class="submenu">
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </li>
  <li class="menu">
    <h2>菜单2</h2>
    <ul class="submenu">
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </li>
  <li class="menu">
    <h2>菜单3</h2>
    <ul class="submenu">
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </li>
</ul>

三、状态机流程图

总结

高度动画 + 状态机 + 事件委托，让手风琴在任何项目里「开箱即合」。

DOM 动画

上一篇：一个非常棒的 JS 动画引擎库_js动画插件
下一篇：推荐一个非常有趣的动画库_给我推荐一些有趣的动漫

JS 打造丝滑手风琴_js 打造丝滑手风琴教程

效果预览

一、核心思路

二、代码速览

三、状态机流程图

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿