Back to Details

exit-animations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Exit Animations

退出动画

Apply Disney's 12 principles when removing elements from view.
移除视图中的元素时，应用迪士尼12项动画原则。

Principle Application

原则应用

Squash & Stretch: Scale down to 95-98% on exit. Element compresses slightly as it departs.
Anticipation: Brief pause or micro-movement before departure. A 50ms hesitation acknowledges the exit.
Staging: Exit toward logical destinations. Deleted items fall down, dismissed modals shrink to origin, sidebars return to their edge.
Straight Ahead vs Pose-to-Pose: Pose-to-pose with clear visible→invisible states. Plan the exit trajectory.
Follow Through & Overlapping: Content exits before container. Text fades 50ms before the card collapses.
Slow In/Slow Out: Use ease-in for exits. Gentle start, accelerating departure: 
cubic-bezier(0.4, 0, 1, 1)
.
Arcs: Exit on curves, not straight lines. Dismissed notifications arc upward-and-out.
Secondary Action: Combine opacity fade with directional movement. Pure fades feel like errors.
Timing:
  • Exits should be 20-30% faster than entrances
  • Quick exits: 100-150ms (tooltips, dropdowns)
  • Standard exits: 150-200ms (modals, toasts)
  • Graceful exits: 200-300ms (page transitions)
Exaggeration: Scale to 0.9 for dramatic departure, 0.97 for subtle dismissal.
Solid Drawing: Maintain spatial logic. Elements should exit the way they came or toward where they "belong."
Appeal: Exits confirm user intent. Make dismissals feel decisive, not abrupt.
挤压与拉伸：退出时缩放到95-98%。元素离开时轻微压缩。
预备动作：离开前短暂停顿或微移动。50毫秒的停顿确认退出操作。
布局编排：朝合理的方向退出。删除的项目向下掉落，关闭的模态框缩小至初始位置，侧边栏退回边缘。
逐帧动画与关键帧动画：采用关键帧动画，明确可见→不可见的状态。规划退出轨迹。
跟随动作与重叠动作：内容先于容器退出。文本在卡片折叠前50毫秒开始淡出。
慢入慢出：退出时使用ease-in缓动。平缓启动，加速离开：
cubic-bezier(0.4, 0, 1, 1)
。
弧线运动：沿曲线而非直线退出。关闭的通知沿向上向外的弧线移动。
次要动作：将透明度淡出与定向移动结合。单纯淡出会让人感觉像是错误。
时长控制:
  • 退出动画应比进入动画快20-30%
  • 快速退出：100-150毫秒（工具提示、下拉菜单）
  • 标准退出：150-200毫秒（模态框、提示框）
  • 优雅退出：200-300毫秒（页面过渡）
夸张表现：戏剧性退出时缩放到0.9，轻微关闭时缩放到0.97。
立体造型：保持空间逻辑。元素应按进入的路径退出，或朝向它们"归属"的位置。
吸引力：退出动画确认用户意图。让关闭操作感觉果断而非突兀。

Timing Recommendations

时长建议

Element TypeDurationEasingNotes
Tooltip100msease-inFaster than entrance
Dropdown150msease-inCollapse upward
Toast150msease-inSlide to origin
Modal200msease-inContent first, overlay last
Deleted Item200msease-inCollapse height after fade
Page250msease-inCurrent page exits, then new enters
元素类型时长缓动效果说明
Tooltip100msease-in比进入动画更快
Dropdown150msease-in向上折叠
Toast150msease-in滑回初始位置
Modal200msease-in内容先退出，遮罩层最后退出
删除项目200msease-in淡出后折叠高度
页面250msease-in当前页面先退出，再进入新页面

Implementation Pattern

实现模式

css
.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);
  }
}
css
.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);
  }
}

Collapse Pattern

折叠模式

For removed list items:
  1. Fade out content (150ms)
  2. Collapse height (150ms, starts at 100ms)
  3. Remove from DOM after animation completes
Total perceived time: 250ms. Always use 
will-change: opacity, transform
for smooth exits.
针对移除列表项的场景：
  1. 内容淡出（150毫秒）
  2. 高度折叠（150毫秒，从第100毫秒开始）
  3. 动画完成后从DOM中移除
总感知时长：250毫秒。为实现流畅退出，务必使用
will-change: opacity, transform
。