渐入渐出Fade In / Out
视觉效果与操作状态通过透明度让内容逐渐出现或消失
渐入渐出是透明度 Opacity的变化，视觉负担较低，适合普通入场和退场。内容即使透明也可能仍在页面里，所以还要正确处理阅读顺序、点击和最终隐藏状态。
分帧示意：opacity 0 → 1，同时轻轻上移
什么时候用
- 让弹窗或卡片以渐入配合轻微位移出现
- 退场快于入场：150ms 内离开，不拖泥带水入场 250ms退场 150ms
- 内容切换交叉淡化：标签页 Tabs、轮播旧出新进，视线不断旧的淡出，新的淡入
- 只动 opacity 和 transform：不碰布局，淡得最流畅opacitytransform
什么时候不用
- 层级变化只 fade：菜单看不出从哪来，该带方向用缩放滑动全部状态全部状态进行中菜单原地淡入，看不出从按钮里长出来
- fade 拖一秒：界面肉得发慌，入场 200~300ms 够了fade1s淡入拖一秒，界面肉得发慌
- 透明度为 0 时仍可能挡住点击，要同时处理交互状态opacity: 0 了还占位，挡住下面的点击
- 什么都 fade：缩放、滑页各就各位，别一招鲜弹窗 fade缩放 fade滑页 fade什么都 fade，层级和方向全丢了
组成结构 · Anatomy
上移 8px ↑200ms
1透明度Opacity从 0 到 1，控制元素由透明变为可见
2轻微位移Offset入场配上移几像素，更自然
3时长Duration入场 200~300ms，退场更快
常见变体 · Variants
纯淡入Pure Fade
遮罩与占位内容安静出现
淡入上移Fade In Up
卡片弹窗入场，最自然
交叉淡化Cross Fade
轮播与 Tab 内容切换
典型使用场景
弹窗与遮罩入场
遮罩淡到 32%，弹窗 fade-in + 上移 6px，共 250ms
提示出现与消失
✓ 保存成功
入场 fade-in 250ms
✓ 保存成功
退场 fade-out 150ms，更干脆
Tab 内容切换
简介
评论 12
相关文章
小狐狸：这个入场动画太顺滑了，求教程！
旧内容（残影）淡出、新内容淡入，交叉淡化不打断视线
页面内容初次呈现
300ms
→
首屏内容整体淡入 + 轻微上移，不闪不跳