Tab 切换、模态/抽屉出现、通知 toast 消失——内容整体来了或走了，需要平滑交代。
产品与设计 · 动效
淡入淡出Fade In / Out
用一小段透明度过渡表达内容「来了 / 走了」：约 150–250ms 平滑，太短像闪、太长像卡、不淡会突兀；淡完后真正移除，并给减动效留瞬切路径。
为 Tab 内容挑一个淡入时长
同一份内容，分别用 0ms / 80ms / 200ms / 800ms 淡入，看内容卡片上落下的观感判断；淡出后内容会从布局移除。
场景：切 Tab 时新内容该多快淡入。选一档时长再播放，看内容卡片上落下的观感判断；淡出后内容会从布局移除。
内容已移除 · 不截获焦点（不是只把 opacity 设为 0）
选一档时长，点「播放淡入」看它给人的感觉。
面板里测到的结论怎么用
刚才四档时长对应的观感，提炼成可复用的判断：时长、移除和减动效三条一起决定淡入淡出成不成立。
- 时长落在约 150–250ms：太短像闪、太长像卡、0ms 等于不淡会突兀。
- 淡出完成后从布局和辅助技术路径移除，不能只留 opacity:0 截获焦点。
- prefers-reduced-motion 或开关启用时瞬切，但显示 / 移除顺序与状态反馈不变。
- 显隐状态用文字、aria、焦点路径同步，透明度变化不独自承担信息。
什么时候用淡入淡出
出现/离开本身需要被感知时适合；需要即时响应或会被觉迟钝的场景别当万能解。
输入反馈、悬停态、长列表逐项加载用淡会显得迟钝；那些场景用即时变化或骨架屏更合适。
正反例：短而干净 vs 长而残留
同一目标——让旧内容离开、新内容接上。差异只在时长是否够短，以及淡出后是否真正移除。
新 Tab 内容用约 200ms ease-out 淡入，旧内容淡出后从布局和辅助技术路径移除。用户感到平滑切换，焦点不会落在隐藏元素上。
差异：时长短而稳，淡后真正消失。淡入拖到 1200ms 让人等读；或淡出只把 opacity 设为 0，元素仍留在原地截获焦点和读屏，叠在新内容上。
差异：只改一处——把「短而干净」换成「长而残留」。快速自测
通知 toast 关闭时淡出结束，下一步该做什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。