Toast Slide-In (消息提示滑入)
别称 Snackbar, Toast notification, Toast stack
简短消息从屏幕边缘滑入或淡入，停留片刻后离开；堆叠的提示会移动让出位置。
适用场景
保存确认、错误提示、撤销提示
变体
- slide from edge
- stacked toasts
- swipe to dismiss
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“消息提示滑入”(Toast Slide-In)，也叫 snackbar 或 toast notification。
每条消息从屏幕边缘向上滑入并淡入，平滑减速；有新提示出现时，已显示的提示要平滑移动让出位置。
在不抢走焦点的前提下把消息播报给屏幕阅读器，显示时间要足够阅读，鼠标悬停或获得焦点时暂停自动关闭。相似的动效
A
Slide In (滑入)
别称 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素从容器边缘之外滑入到停靠位置，不带淡入效果。
适用场景
抽屉、侧边栏、横幅
在[应用位置]添加“滑入”(Slide In)入场动画，也叫 slide in left、slide in right、slide in up 或 slide in down。
元素从容器边缘之外滑到停靠位置，全程保持完全不透明：快速，平滑减速，不要回弹。
在容器边缘处裁切，避免它在外面时遮住相邻元素或产生滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示。A
将鼠标悬停在上面
Tooltip Fade (文字提示淡入)
别称 Tooltip reveal
悬停片刻后，一个小标签在元素旁一边轻移到位一边淡入。
适用场景
图标说明、被截断的文字
在[应用位置]添加“文字提示淡入”(Tooltip Fade)，也叫 tooltip reveal。
鼠标悬停片刻后，标签在元素旁一边轻移到位一边淡入；指针离开时立即快速消失，不要延迟。
键盘聚焦时也要显示，按 Escape 可关闭，并把它与元素关联起来，让屏幕阅读器能读出。A
Bottom Sheet Slide-Up (底部抽屉上滑)
别称 Bottom drawer, Sheet
面板从底部边缘向上滑出，通常可以拖动，并吸附到几个固定高度。
适用场景
移动端操作、分享菜单、筛选
在[应用位置]添加“底部抽屉上滑”(Bottom Sheet Slide-Up)，也叫底部抽屉(bottom drawer)或面板(sheet)。
面板从底部边缘向上滑出，同时后方页面变暗，平滑减速停到位，不要回弹。
每次打开面板都播放一次，关闭时再滑回下方；面板打开期间，键盘焦点要留在面板内部。A
Fade In Directional (方向淡入)
别称 Fade In Down, Fade In Left, Fade In Right
元素从一侧移动一小段距离到最终位置，同时淡入。
适用场景
加载或滚动时出现的区块和卡片
在[应用位置]添加“方向淡入”(Fade In Directional)入场动画，也叫 fade in left、fade in right 或 fade in down。
元素从一侧移动一小段距离到最终位置，同时淡入：迅速流畅，到位时减速，不要弹跳。
只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。Component & Layout 中的其他动效
- A
- B
- C
点击试试
Accordion Expand-Collapse (手风琴展开收起)
别称 Collapse, Disclosure, Expandable section
切换标题时，内容面板平滑地展开到完整高度，或收起到零。
适用场景
常见问题、设置分组、侧边栏树形菜单
在[应用位置]添加“手风琴展开收起”(Accordion Expand-Collapse)效果，也叫折叠面板(collapse)或展开区(disclosure)。
点击标题时，面板平滑展开到内容的完整高度，再点一次则完全收起，标题上的箭头也跟着旋转：快速、顺滑，不要回弹。
按内容的真实高度做动画，而不是写死一个估计值；标题要用真正的按钮并标明展开状态，并且支持键盘操作。A
Backdrop Scrim Fade (遮罩层淡入)
别称 Overlay fade, Scrim
一层半透明的深色遮罩在浮层后方淡入，让页面变暗。
适用场景
弹窗、抽屉、底部面板的背后
在[应用位置]添加“遮罩层淡入”(Backdrop Scrim Fade)，也叫浮层淡入(overlay fade)或遮罩(scrim)。
浮层打开时，一层半透明的深色遮罩在后方页面上柔和地淡入，比浮层本身稍慢一点；关闭时再淡出。
无论浅色还是深色主题，遮罩都保持深色；遮罩显示期间，后方页面不能滚动，也不能响应点击。