SuperAPI AI 工具集

stagger-list

通用与其它

查看项目

更新于 10-16 01:36

技能介绍

用途:stagger-list 用于让列表项在加载时按顺序依次上升并淡入,形成错峰入场动画。它属于 motion-anything,并遵循 MOTION-SPEC.md。

适用场景:首屏可见的短列表、菜单、导航项,或下拉菜单展开。

不适用场景:长列表或屏幕外列表,应改用 scroll-reveal;整个动画序列应控制在约 600ms 以内。

使用方式:复制 stagger-list.css 与 stagger-list.js 并链接到页面;用 <ul data-stagger>…</ul> 包裹列表项,可选 data-stagger-step="70" 设置错峰步长。

无障碍与性能:在 prefers-reduced-motion 下内容立即显示;动画仅使用 transform 与 opacity。

限制:资料未提供具体安装命令、依赖要求、浏览器兼容范围及配置参数之外的细节。