用途:为导航栏、菜单、侧边栏及寻路元素设计动画,让状态切换更流畅、直观。
主要能力:把迪士尼12项动画原则映射到导航场景。挤压拉伸用于菜单项点击压缩、汉堡图标变X时的线条压缩;预备动作用于下拉展开前触发项抬起或高亮、侧边栏图标先微转再滑出;舞台化用于区分激活项、下拉层级与焦点顺序;姿势对应用于定义关闭、打开中、打开、关闭中等状态及默认、悬停、激活、选中姿态;跟随与重叠用于下拉项错峰进入、子菜单箭头延迟旋转、激活指示器带轻微过冲滑动;缓入缓出用于打开用ease-out、关闭用ease-in、悬停用ease-in-out;弧线用于移动端侧滑与指示器移动路径;次要动作用于下拉展开时阴影增长、父项保持高亮、箭头旋转;夸张用于指示器回弹、重要项脉冲、大型菜单醒目入场;扎实绘图用于保持间距、阴影与图标清晰一致;吸引力强调导航微交互值得投入。
时序参考:下拉打开200-250ms,关闭150-200ms,悬停高亮100-150ms,激活指示器滑动200-300ms,每项错峰20-40ms,汉堡变形300ms。
使用方式:以CSS过渡实现,示例中.nav-dropdown使用transform-origin: top,过渡transform与opacity各200ms ease-out;.nav-indicator使用transform 250ms cubic-bezier(0.4, 0, 0.2, 1)。关键属性包括transform(translateX/Y、scaleY、rotate)、opacity、height/max-height、clip-path、transform-origin。
适用场景:导航栏、下拉菜单、侧边栏、移动端汉堡菜单、激活指示器、大型菜单等寻路交互。
限制:资料未提供具体框架适配、浏览器兼容性、无障碍处理及性能数据,暂未提供。