SuperAPI AI 工具集

transitions

通用与其它

查看项目

更新于 10-15 19:52

技能介绍

用途:指导在状态、视图或路由之间切换时的动效设计,核心是共享元素连续性、形变、错峰、空间方向与页面过渡。主张“飞行而非瞬移”,让过渡帮助用户理解从 A 到 B 的路径。

主要能力:提供机制选择阶梯——节点未卸载仅布局变化用 FLIP;同一组件在同树中换位用 layoutId;整文档或路由切换用 View Transitions API(document.startViewTransition() 配合唯一 view-transition-name);无持续元素则不做共享元素。给出方向、错峰、时长与缓动准则:方向须匹配空间关系,进入与退出走同一路径;错峰 30–50ms,上限 80ms,长列表用 min(i, 8) 钳制使总时长不超 400ms;持续元素用 ease-in-out,进入/退出用 ease-out;页面级过渡 300–400ms 且首帧即可交互。

使用方式:先 grep 项目已有机制(startViewTransition、view-transition-name、layoutId、AnimatePresence、FLIP 辅助或框架路由钩子),沿用既有机制,避免两套共享元素系统。写代码前先以表格列出元素、角色(持续/进入/退出)、方向、延迟与机制,并给出真实数值。

适用场景:标签切换、路由变化、列表重排、面板进出、共享元素跨边界移动等。

限制:错峰不得阻塞交互或数据获取;高频切换应保持即时;需保留 prefers-reduced-motion 的降级(保留交叉淡入、去掉位移);无法用一句话说明过渡解释的 A→B 时应删除该过渡。资料未提供具体安装命令、收费与平台信息。