mcpField
E
exit-animations

exit-animations

github.com/dylantarre设计与 UI132507 次安装43 周前更新
代码仓库

关于 exit-animations

这项设计技能将 Disney 的 12 条动画原理用于 UI 出场动画，提供常见元素的时长与缓动建议，以及退出和列表项收缩的 CSS 模式。

主要功能

  1. 01基于 12 条原理的退出指导
  2. 02按 UI 元素提供时长建议
  3. 03缓动与运动轨迹指导
  4. 04退出和收缩的 CSS 模式

适用场景

  1. 01设计工具提示和下拉菜单的关闭动画
  2. 02制作模态框和 toast 的退出动画
  3. 03为列表项移除设计分阶段收缩

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill exit-animations

安装后在 Claude Code 中输入/exit-animations确认已加载。

详细介绍

退出动画

应用迪士尼 12 条动画原则，让元素从视图中消失。

原则应用

挤压与拉伸：退出时缩小到 95-98%。元素离开时略微压缩。

预备动作：离开前短暂停顿或微小移动。50ms 的迟疑让退出动作更自然。

演出布局：朝合理的方向退出。删除的项目向下落，被关闭的模态框缩回原点，侧边栏返回边缘。

连续动作与关键姿势：采用关键姿势，明确呈现从可见到不可见的状态。规划退出轨迹。

跟随与重叠：内容先于容器退出。文本先淡出 50ms，卡片再收起。

缓入缓出：退出时使用缓入。平缓起步，逐渐加速离开：cubic-bezier(0.4, 0, 1, 1)。

弧线：沿曲线退出，而非直线移动。被关闭的通知沿弧线向上滑出。

次要动作：将不透明度渐变与定向移动结合。单纯淡出会让人觉得像出了错。

时长：

  • 退出动画应比进入动画快 20-30%
  • 快速退出：100-150ms（工具提示、下拉菜单）
  • 标准退出：150-200ms（模态框、Toast）
  • 从容退出：200-300ms（页面过渡）

夸张：明显退出时缩放到 0.9，轻微关闭时缩放到 0.97。

扎实绘制：保持空间逻辑。元素应沿进入时的路径退出，或朝其“所属”的位置退出。

吸引力：退出动作应确认用户意图。让关闭操作显得果断，而非突兀。

时长建议

元素类型时长缓动说明
工具提示100msease-in比进入动画更快
下拉菜单150msease-in向上收起
Toast150msease-in滑回原点
模态框200msease-in内容先退出，遮罩最后退出
已删除项目200msease-in淡出后收起高度
页面250msease-in当前页面先退出，新页面再进入

实现模式

.exiting {
  animation: exit 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

收起模式

对于已移除的列表项：

  1. 淡出内容（150ms）
  2. 收起高度（150ms，从 100ms 时开始）
  3. 动画完成后从 DOM 中移除

感知总时长：250ms。始终使用 will-change: opacity, transform，确保退出动画流畅。

评论

支持 Markdown