UI · №29 · PLATE

入场动效（怎么选）Slide vs Scale vs Pop

滑进来的效果从小变大出现弹一下出来的感觉东西出现时的动画

先看怎么选

「让它带个动画出现」有三种手感——从旁边滑进来、原地从小放大、带一下回弹的「啵」。说错了，agent 给你一个不知道从哪飘来的滑入，而你想要的其实是原地轻轻浮现。

朱批有明确来向、有空间关系 → Slide；原地浮现、强调「长出来」 → Scale；要活泼要性格 → Pop。

LIVE SPECIMEN真的能玩，点点看

卡

滑入

Slide

从某个方向平移进场——自带「从哪来」的空间语义，是三者中唯一有方向感的。

适合: 抽屉、侧栏、Toast、从屏幕边缘进入的东西——「来向」本身有意义时。
不适合: 原地出现的弹窗/卡片——凭空选个方向，用户会纳闷「它为什么从左边来」。

实现细节与 Prompt

web: transform: translateX/Y + opacity 同步过渡
react: framer-motion: initial={{ x: 24, opacity: 0 }} animate={{ x: 0, opacity: 1 }}

Slide the panel in from the right: start at translateX(24px) with opacity 0, animate to translateX(0) and opacity 1 over 250ms ease-out; the element should enter from the side it logically belongs to.

放大入场

Scale

从略小（95% 左右）放大到原尺寸并淡入——原地「浮现/长出来」，无方向、稳重。

适合: 弹窗、卡片、从触发点长出来的 Popover——没有来向、强调凭空浮现时。
不适合: 从 0 开始放大——scale(0)→1 是卡通片手感，显廉价；长列表逐项放大也会闹。

实现细节与 Prompt

web: transform: scale(.95)→1 + opacity 同步过渡
react: framer-motion: initial={{ scale: 0.95, opacity: 0 }}

Scale the modal in: start at scale(0.95) with opacity 0, animate to scale(1) and opacity 1 over 200ms ease-out, so it grows into place instead of sliding in from anywhere.

弹出

Pop

放大入场加一下过冲——先超过 100% 再落回，带弹性、有性格的「啵」。

适合: 点赞爱心、徽章解锁、成功打勾——想给小元素一点愉悦感和注意力时。
不适合: 严肃场景和大容器——大面积的东西弹跳显得不稳重；高频出现会腻。

实现细节与 Prompt

web: keyframes：scale .9 → 1.06（70%）→ 1，或 spring 缓动
react: framer-motion: transition={{ type: 'spring', stiffness: 400, damping: 17 }}

Pop the badge in with a slight overshoot: keyframes from scale(0.9) opacity 0, to scale(1.06) at 70%, settling at scale(1) opacity 1, 300ms total ease-out, for a playful bounce.

详细说明

入场比离场更容易被含糊带过——「带个动画出现」在 agent 眼里至少是三种意图：Slide 回答「它从哪来」，Scale 回答「它在这里长出来」，Pop 在 Scale 上加一勺性格。最常见的翻车是给原地浮现的弹窗配了个莫名其妙的滑入方向——记住：没有来向，就不要 Slide。