modals-dialogs
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseModal & Dialog Animation Principles
模态框与对话框动画设计原则
Apply Disney's 12 principles to modals for seamless, non-jarring transitions.
将迪士尼的12条动画原则应用于模态框，实现流畅、无突兀感的过渡效果。
Principles Applied to Modals
应用于模态框的动画原则
1. Squash & Stretch
1. Squash & Stretch（挤压与拉伸）
Modal can scale from 0.9 to 1.0 on enter, creating a subtle expansion feel. Exit reverses. Keep it subtle to maintain professionalism.
模态框进入时可从0.9缩放至1.0，营造微妙的展开感。退出时则反向进行。保持效果柔和以维持专业感。
2. Anticipation
2. Anticipation（预备动作）
Trigger element (button) should react before modal appears. Brief scale-down of trigger, then modal emerges from that point.
触发元素（按钮）应在模态框出现前做出反应。触发按钮先短暂缩小，随后模态框从该位置浮现。
3. Staging
3. Staging（舞台布置）
Backdrop dims (0.5-0.7 opacity) to focus attention on modal. Background content can blur slightly (4-8px). Modal is the star.
背景遮罩调暗（透明度0.5-0.7），将注意力集中在模态框上。背景内容可轻微模糊（4-8px）。模态框是视觉焦点。
4. Straight Ahead & Pose to Pose
4. Straight Ahead & Pose to Pose（逐帧动画与关键帧动画）
Define states: hidden, entering, visible, exiting. Clear keyframes for each. Pose-to-pose ensures predictable, controllable animation.
定义状态：隐藏、进入中、可见、退出中。为每个状态设置清晰的关键帧。关键帧动画可确保动画效果可预测、易控制。
5. Follow Through & Overlapping Action
5. Follow Through & Overlapping Action（跟随动作与重叠动作）
Modal container arrives first, content fades in 50-100ms after. Close button can have slight bounce at end. Stagger form fields.
模态框容器先到位，内容在50-100ms后淡入。关闭按钮在动画结束时可略有弹跳效果。表单字段可按顺序交错出现。
6. Ease In & Ease Out
6. Ease In & Ease Out（缓入缓出）
Enter: (decelerates in). Exit: (accelerates out). for smooth, bouncy enter.
ease-outease-incubic-bezier(0.16, 1, 0.3, 1)进入时使用（减速进入）。退出时使用（加速退出）。使用实现流畅、带弹性的进入效果。
ease-outease-incubic-bezier(0.16, 1, 0.3, 1)7. Arcs
7. Arcs（弧线运动）
If modal originates from a button, arc toward center rather than straight line. Creates more organic movement path.
如果模态框从按钮处触发，应沿弧线向中心移动而非直线。营造更自然的运动轨迹。
8. Secondary Action
8. Secondary Action（次要动作）
While modal scales in (primary), backdrop fades (secondary), content staggers (tertiary). Each supports without competing.
模态框缩放进入（主要动作）的同时，背景遮罩淡入（次要动作），内容交错出现（第三动作）。各动作相互配合而非相互干扰。
9. Timing
9. Timing（时间控制）
- Backdrop fade: 200-250ms
- Modal enter: 250-350ms
- Modal exit: 200ms (faster out)
- Content stagger: 30-50ms per item
- Shake on error: 300ms
- 背景遮罩淡入：200-250ms
- 模态框进入：250-350ms
- 模态框退出：200ms（退出速度更快）
- 内容交错出现：每项30-50ms
- 错误时抖动效果：300ms
10. Exaggeration
10. Exaggeration（夸张）
Dramatic entrance for important alerts. Slight overshoot scale (1.02) before settling at 1.0. Error modals can shake briefly.
重要提示框可采用更具冲击力的进入效果。先略微过度缩放至1.02，再回归至1.0。错误提示模态框可短暂抖动。
11. Solid Drawing
11. Solid Drawing（扎实的造型）
Modal shadows should match interface light source. Maintain consistent border-radius. Content should never overflow during animation.
模态框的阴影应与界面光源一致。保持统一的圆角半径。动画过程中内容不得溢出。
12. Appeal
12. Appeal（吸引力）
Smooth entrances feel polished. Origin-point animation feels connected. Abrupt modals feel jarring. Invest in modal transitions.
流畅的进入效果会让界面显得精致。从触发点开始的动画会让用户感觉连贯。突兀的模态框会显得生硬。重视模态框的过渡效果。
CSS Implementation
CSS 实现
css
.modal-backdrop {
transition: opacity 250ms ease-out;
}
.modal {
animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalEnter {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}css
.modal-backdrop {
transition: opacity 250ms ease-out;
}
.modal {
animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalEnter {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}Key Properties
关键属性
- : scale, translate (origin point)
transform - : fade in/out
opacity - : blur background
backdrop-filter - : keyframe sequences
animation - : source point
transform-origin
- : 缩放、平移（原点设置）
transform - : 淡入/淡出
opacity - : 背景模糊
backdrop-filter - : 关键帧序列
animation - : 动画源点
transform-origin