重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
navigation-menus by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill navigation-menus将迪士尼的12条动画原则应用于导航,实现流畅、直观的寻路体验。
菜单项在点击时可轻微压缩。移动端汉堡菜单图标线条在转换为X形时应具有挤压效果。
下拉菜单展开前,触发项可以上浮或高亮显示。侧边栏切换图标在面板滑动前可轻微旋转。
活动导航项应清晰可辨。下拉菜单通过z-index和阴影显示在其他内容之上。焦点层级很重要。
定义清晰的状态:关闭、打开中、打开、关闭中。每个菜单项都有默认、悬停、活动、选中等姿态。
下拉菜单项错开进入(每个延迟20-30毫秒)。子菜单箭头在文本稳定后旋转。活动指示器滑动时带有轻微过冲。
菜单打开:ease-out。菜单关闭:ease-in。悬停过渡:ease-in-out。Material风格使用 cubic-bezier(0.4, 0, 0.2, 1)。
从侧面滑入的移动端导航应带有轻微弧度。菜单指示器在项目间滑动时可遵循微妙的曲线路径。
当下拉菜单展开时(主要动作),阴影增长(次要动作),父项保持高亮(第三动作)。V形图标旋转。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
活动指示器可以过冲并回弹。重要的导航项可以短暂脉动以吸引注意。大型菜单值得使用大胆的入场效果。
动画期间保持一致的间距。阴影应保持一致。图标在所有动画帧中应保持清晰。
流畅的导航感觉专业。敏捷的响应能建立信心。导航被频繁使用,因此值得在这些微交互上投入。
.nav-dropdown {
transform-origin: top;
transition: transform 200ms ease-out,
opacity 200ms ease-out;
}
.nav-dropdown.open {
transform: scaleY(1);
opacity: 1;
}
.nav-indicator {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
transform: translateX/Y, scaleY, rotateopacity: 淡入淡出菜单height/max-height: 手风琴菜单clip-path: 揭示效果transform-origin: 下拉方向每周安装量
68
代码仓库
GitHub星标数
23
首次出现
2026年1月24日
安全审计
安装于
codex59
opencode57
gemini-cli56
cursor51
github-copilot51
claude-code49
Apply Disney's 12 principles to navigation for fluid, intuitive wayfinding.
Menu items can compress slightly on click. Mobile hamburger icon lines should squash during transformation to X.
Before dropdown opens, trigger item can lift or highlight. Sidebar toggle icon rotates slightly before panel slides.
Active nav item should be clearly distinguished. Dropdown menus appear above other content via z-index and shadow. Focus hierarchy matters.
Define clear states: closed, opening, open, closing. Each menu item has default, hover, active, selected poses.
Dropdown items stagger in (20-30ms delay each). Submenu arrows rotate after text settles. Active indicator slides with slight overshoot.
Menu open: ease-out. Menu close: ease-in. Hover transitions: ease-in-out. cubic-bezier(0.4, 0, 0.2, 1) for Material-style.
Mobile nav sliding in from side should have slight arc. Menu indicator sliding between items can follow subtle curve path.
While dropdown expands (primary), shadow grows (secondary), parent item stays highlighted (tertiary). Chevron rotates.
Active indicator can overshoot and bounce back. Important nav items can pulse briefly for attention. Mega menus deserve bold entrances.
Maintain consistent spacing during animations. Shadows should be consistent. Icons should stay crisp at all animation frames.
Smooth nav feels professional. Snappy responses build confidence. Navigation is used constantly, so invest in these micro-interactions.
.nav-dropdown {
transform-origin: top;
transition: transform 200ms ease-out,
opacity 200ms ease-out;
}
.nav-dropdown.open {
transform: scaleY(1);
opacity: 1;
}
.nav-indicator {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
transform: translateX/Y, scaleY, rotateopacity: fade menusheight/max-height: accordion menusclip-path: reveal effectstransform-origin: dropdown directionWeekly Installs
68
Repository
GitHub Stars
23
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex59
opencode57
gemini-cli56
cursor51
github-copilot51
claude-code49
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装