返回
UI · №30 · PLATE
渐隐（怎么选）Fade vs Dissolve vs Blur-out
慢慢消失的效果淡出去化掉那种感觉一点点看不见
先看怎么选
你想让个东西「慢慢消失」？三种"渐隐"手感完全不同——说错了 agent 给你一个生硬的透明度动画，而你想要的其实是那种高级的溶解感。
朱批只要它走开 → Fade；想要高级的"化掉"质感 → Dissolve；强调"失焦/被替换" → Blur-out。
LIVE SPECIMEN真的能玩，点点看
卡
卡
卡
淡出
Fade
最基础的渐隐——只改透明度，从不透明到透明。干净、快、无所谓质感。
- 适合
- 元素单纯要离场、Toast 消失、页面切换——不需要特别的质感时。
- 不适合
- 想要"有设计感"的消失时——纯 fade 会显得平淡。
实现细节与 Prompt
- web
- transition: opacity 200ms
- react
- framer-motion: animate={{ opacity: 0 }}
Fade the element out: animate opacity from 1 to 0 over 200ms with ease-out, then remove it from layout.溶解
Dissolve
透明度 + 轻微缩放/位移的组合，像素级"化开"的质感，比纯 fade 高级。
- 适合
- 卡片/图片离场、删除动作、想要精致收尾时。
- 不适合
- 高频、追求极速响应的微交互——组合动画略慢。
实现细节与 Prompt
- web
- opacity + transform: scale(.96) 同步过渡
- react
- framer-motion: animate={{ opacity: 0, scale: 0.96 }}
Dissolve the card out: animate opacity to 0 and scale to 0.96 simultaneously over 250ms with ease-in, giving a soft melting-away feel.失焦渐隐
Blur-out
透明度 + 模糊（blur）叠加，强调"失去焦点/正在被替换"，有景深感。
- 适合
- 内容被覆盖、切换到新视图、强调"这个正在退居背景"时。
- 不适合
- 大面积元素——blur 滤镜性能开销大，慎用于长列表。
实现细节与 Prompt
- web
- opacity + filter: blur(8px) 同步过渡
- react
- framer-motion: animate={{ opacity: 0, filter: 'blur(8px)' }}
Blur the element out as it leaves: animate opacity to 0 and filter blur from 0 to 8px over 220ms, so it feels like it's losing focus and receding.详细说明
「慢慢消失」是最容易被含糊带过的动效需求。淡出、溶解、失焦渐隐——三种手感对应三种设计意图：单纯离场、精致收尾、退居背景。分清它们，你才能让 agent 给出你脑子里那个质感，而不是一个生硬的透明度动画。