SuperAPI AI 工具集

exit-animations

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:当界面元素需要离开屏幕时使用,例如关闭模态框、关闭通知、移除列表项或页面转场等“离开视图”的动画。

主要能力:把迪士尼动画十二原则映射到离场动画上。挤压拉伸:离场时缩放到95%至98%。预备动作:离场前有约50毫秒的停顿或微动。舞台调度:朝合理方向退出,删除项下落、模态框缩回原点、侧边栏回到边缘。跟随与重叠:内容先于容器退出,文字比卡片折叠早约50毫秒淡出。缓入缓出:离场用ease-in,曲线为cubic-bezier(0.4, 0, 1, 1)。弧线:沿曲线而非直线退出。次要动作:透明度淡出与方向移动结合,纯淡出会像出错。夸张:戏剧性离场缩放到0.9,轻微关闭缩放到0.97。

时长建议:离场应比入场快20%至30%。工具提示100毫秒,下拉菜单150毫秒(向上折叠),提示条150毫秒(滑回原点),模态框200毫秒(内容先、遮罩后),删除项200毫秒(淡出后折叠高度),页面250毫秒(当前页先退出,新页再进入),均用ease-in。

实现模式:为离场元素添加.exiting类,使用animation: exit 200ms cubic-bezier(0.4, 0, 1, 1) forwards,并在@keyframes中从opacity:1、translateY(0)、scale(1)过渡到opacity:0、translateY(-10px)、scale(0.98)。移除列表项时先淡出内容150毫秒,再折叠高度150毫秒(从100毫秒处开始),动画完成后从DOM移除,总感知时间约250毫秒。建议使用will-change: opacity, transform保证流畅。

适用场景:前端界面交互动效设计。限制:资料未提供具体框架绑定、浏览器兼容性说明或无障碍处理细节。