Popover / Dropdown Open (下拉菜单弹出)
别称 Menu pop, Popover pop-in, Dropdown scale-fade
浮动菜单从触发按钮所在的位置一边放大一边淡入。
适用场景
下拉菜单、弹出层、选择列表
变体
- scale from trigger origin
- slide-fade from side
- cascading menu items
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“下拉菜单弹出”(Popover / Dropdown Open)动画，也叫 menu pop 或 dropdown scale-fade。
菜单从触发按钮旁的角落一边微微放大一边淡入，要快速、利落；关闭时淡出得稍快一些。
让菜单始终贴着触发按钮，按 Escape 或点击外部即可关闭，并在触发按钮上向屏幕阅读器标明展开状态。相似的动效
A
Modal Scale-Fade In (弹窗缩放淡入)
别称 Dialog open animation, Zoom-fade dialog
对话框在变暗的页面上方，从中心略微放大并淡入。
适用场景
确认对话框、浮层中的表单
在[应用位置]添加“弹窗缩放淡入”(Modal Scale-Fade In)动画，也叫对话框打开动画(dialog open animation)或缩放淡入对话框(zoom-fade dialog)。
后方页面变暗的同时，对话框从中心略微放大并淡入：快速、含蓄，不要回弹。
每次打开对话框都播放一次，把焦点移入对话框并留在里面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，只用简单的淡入。A
将鼠标悬停在上面
Tooltip Fade (文字提示淡入)
别称 Tooltip reveal
悬停片刻后，一个小标签在元素旁一边轻移到位一边淡入。
适用场景
图标说明、被截断的文字
在[应用位置]添加“文字提示淡入”(Tooltip Fade)，也叫 tooltip reveal。
鼠标悬停片刻后，标签在元素旁一边轻移到位一边淡入；指针离开时立即快速消失，不要延迟。
键盘聚焦时也要显示，按 Escape 可关闭，并把它与元素关联起来，让屏幕阅读器能读出。A
Zoom In (缩放进入)
别称 Scale In, Zoom In Up, Zoom In Down
元素从小而透明的状态放大到完整尺寸，同时淡入。
适用场景
模态框、图片灯箱、弹出层
在[应用位置]添加“缩放进入”(Zoom In)入场动画，也叫 scale in。
元素从小而透明放大到完整尺寸，同时淡入：快速、平滑，不要过冲。
以中心为基点缩放，不影响周围布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接在原位显示，不做动画。- A
- B
- C
点击试试
Accordion Expand-Collapse (手风琴展开收起)
别称 Collapse, Disclosure, Expandable section
切换标题时，内容面板平滑地展开到完整高度，或收起到零。
适用场景
常见问题、设置分组、侧边栏树形菜单
在[应用位置]添加“手风琴展开收起”(Accordion Expand-Collapse)效果，也叫折叠面板(collapse)或展开区(disclosure)。
点击标题时，面板平滑展开到内容的完整高度，再点一次则完全收起，标题上的箭头也跟着旋转：快速、顺滑，不要回弹。
按内容的真实高度做动画，而不是写死一个估计值；标题要用真正的按钮并标明展开状态，并且支持键盘操作。Component & Layout 中的其他动效
ACB
点击试试
Shared Layout Animation (共享布局动画)
别称 layoutId, Shared element (in-page)
元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。
适用场景
选中高亮、缩略图到展开视图
在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。ABC
点击试试
Tab Indicator Slide (标签指示条滑动)
别称 Sliding underline, Active tab indicator, Segmented control pill
下划线或胶囊形背景从旧标签滑动到新选中的标签。
适用场景
标签栏、分段控件
在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。A
Toast Slide-In (消息提示滑入)
别称 Snackbar, Toast notification, Toast stack
简短消息从屏幕边缘滑入或淡入，停留片刻后离开；堆叠的提示会移动让出位置。
适用场景
保存确认、错误提示、撤销提示
在[应用位置]添加“消息提示滑入”(Toast Slide-In)，也叫 snackbar 或 toast notification。
每条消息从屏幕边缘向上滑入并淡入，平滑减速；有新提示出现时，已显示的提示要平滑移动让出位置。
在不抢走焦点的前提下把消息播报给屏幕阅读器，显示时间要足够阅读，鼠标悬停或获得焦点时暂停自动关闭。