SuperAPI AI 工具集

lists-grids

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:为列表、网格、表格或成组项目设计动画,覆盖排序、筛选、加载等状态变化,让集合类界面的动效更平滑、有组织。

主要能力:把迪士尼十二动画原则映射到列表与网格场景,包括挤压拉伸、预备动作、舞台调度、逐帧与关键帧、跟随与重叠动作、缓入缓出、弧线、次要动作、时间控制、夸张、扎实构图与吸引力。给出各状态的时间参考:逐项延迟 30-75ms,进入 200-300ms,退出 150-200ms,重排 250-350ms,筛选洗牌 300-400ms,总延迟上限 500-800ms。

使用方式:以 CSS 实现为主,用 animation-delay 做逐项错开,用 transform 与 opacity 控制进入退出,用 transition 处理网格项,用 grid-template 与 order 处理布局变化与重排。示例中 .list-item 使用 itemEnter 250ms ease-out backwards,并通过 nth-child 依次设置 0ms、50ms、100ms 等延迟;.grid-item 使用 transform 300ms ease-in-out 与 opacity 200ms ease-out。

适用场景:需要排序、筛选、加载、拖拽重排的列表与网格界面,例如内容集合、卡片网格、数据表格。

限制:资料未提供具体框架绑定、安装命令、收费方式或平台支持信息,暂未提供。