Component & Layout

切换标题时，内容面板平滑地展开到完整高度，或收起到零。

在[应用位置]添加“手风琴展开收起”(Accordion Expand-Collapse)效果，也叫折叠面板(collapse)或展开区(disclosure)。
点击标题时，面板平滑展开到内容的完整高度，再点一次则完全收起，标题上的箭头也跟着旋转：快速、顺滑，不要回弹。
按内容的真实高度做动画，而不是写死一个估计值；标题要用真正的按钮并标明展开状态，并且支持键盘操作。

一层半透明的深色遮罩在浮层后方淡入，让页面变暗。

在[应用位置]添加“遮罩层淡入”(Backdrop Scrim Fade)，也叫浮层淡入(overlay fade)或遮罩(scrim)。
浮层打开时，一层半透明的深色遮罩在后方页面上柔和地淡入，比浮层本身稍慢一点；关闭时再淡出。
无论浅色还是深色主题，遮罩都保持深色；遮罩显示期间，后方页面不能滚动，也不能响应点击。

面板从底部边缘向上滑出，通常可以拖动，并吸附到几个固定高度。

在[应用位置]添加“底部抽屉上滑”(Bottom Sheet Slide-Up)，也叫底部抽屉(bottom drawer)或面板(sheet)。
面板从底部边缘向上滑出，同时后方页面变暗，平滑减速停到位，不要回弹。
每次打开面板都播放一次，关闭时再滑回下方；面板打开期间，键盘焦点要留在面板内部。

幻灯片停在原处，彼此交叉淡化切换，而不是滑动。

在[应用位置]添加“轮播交叉淡化”(Carousel Crossfade)，也叫淡入淡出幻灯片(fade slideshow)或轮播淡化(carousel fade)。
幻灯片停在原处，缓慢地交叉淡化：旧的一张淡出的同时，下一张淡入，然后停留几秒再切换到下一张。
无缝循环回到第一张，鼠标悬停或获得焦点时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，不要自动切换。

幻灯片在可视区域内水平移动，每次吸附一张到位。

在[应用位置]添加“轮播滑动”(Carousel Slide)，也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动，使下一张幻灯片吸附到中间，平滑减速；两侧边缘露出相邻的幻灯片，位置圆点也跟着变化。
每次只移动一张，除了按钮和方向键，也支持触屏滑动，并给控件加上供屏幕阅读器读取的标签。

卡片展开成完整的详情视图，始终是同一个可见容器在改变形状并显示新内容。

在[应用位置]添加“容器变换”(Container Transform)过渡，也叫卡片展开到详情(card expand to detail)或可展开卡片(expandable card)。
打开卡片时，同一个容器平滑地扩展成完整的详情视图：旧内容迅速淡出，容器快要展开完时新内容再淡入；关闭时反向播放。
始终保持一个连续的容器，而不是在两个独立的框之间交叉淡化；打开后把焦点移到详情视图里。

拖动某一项时，其他项滑开让位，并按新的顺序排好。

在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。

侧边面板从左、右或顶部边缘滑入，推开或覆盖页面内容。

在[应用位置]添加“抽屉滑入”(Drawer Slide)，也叫画布外菜单(off-canvas)或侧边面板(side sheet)。
面板从侧边滑入并覆盖在内容上方，同时后方页面变暗，速度快、平滑减速；关闭时按同样的方式滑出。
抽屉打开时把键盘焦点留在里面，可以用 Escape 键或点击变暗区域关闭，关闭后把焦点还给打开它的按钮。

布局变化后，元素平滑地移动到新的位置和尺寸。

在[应用位置]添加“FLIP布局动画”(FLIP Layout Animation)，也叫布局动画(layout animation)或 First-Last-Invert-Play。
布局变化时，每个元素从旧位置平滑移动到新位置，而不是直接跳过去：开始时快，最后轻柔地落定。
只用 transform 做动画，避免页面每一帧都重新排版；如果用户开启了“减少动态效果”(prefers-reduced-motion)，直接切换到新布局。

列表项添加时淡入并滑入，删除时以动画退出，相邻项随之补上空位。

在[应用位置]添加“列表项进出”(List Item Enter/Exit)动画，也叫动画列表(animated list)。
新项先撑开自己的空间，再淡入并滑入；被删除的项先淡出，再收起高度，让相邻项平滑地补上空位。
被删除的项要等退出动画结束后才移除，这样添加或删除项目时列表不会跳动。

一行内容横向无缝地无限循环滚动。

在[应用位置]添加“跑马灯”(Marquee)，即水平方向无限滚动的条带，也叫 ticker。
内容从右向左以缓慢、匀速的速度滚动，无缝循环，衔接处不能出现跳动。
鼠标悬停时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止滚动。

应用筛选或排序时，网格中的卡片重新排列、淡出或滑到新的位置。

在[应用位置]添加“瀑布流重排”(Masonry / Grid Shuffle)效果，也叫可筛选网格动画(filterable grid animation)。
应用筛选时，不再匹配的卡片在原地缩小并淡出，剩下的卡片平滑地滑到新位置；清除筛选时反向播放。
网格高度变化时不要让周围页面跳动；筛选控件要用真正的按钮，并标明当前选中的是哪个筛选。

对话框在变暗的页面上方，从中心略微放大并淡入。

在[应用位置]添加“弹窗缩放淡入”(Modal Scale-Fade In)动画，也叫对话框打开动画(dialog open animation)或缩放淡入对话框(zoom-fade dialog)。
后方页面变暗的同时，对话框从中心略微放大并淡入：快速、含蓄，不要回弹。
每次打开对话框都播放一次，把焦点移入对话框并留在里面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，只用简单的淡入。

浮动菜单从触发按钮所在的位置一边放大一边淡入。

在[应用位置]添加“下拉菜单弹出”(Popover / Dropdown Open)动画，也叫 menu pop 或 dropdown scale-fade。
菜单从触发按钮旁的角落一边微微放大一边淡入，要快速、利落；关闭时淡出得稍快一些。
让菜单始终贴着触发按钮，按 Escape 或点击外部即可关闭，并在触发按钮上向屏幕阅读器标明展开状态。

元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。

在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。

下划线或胶囊形背景从旧标签滑动到新选中的标签。

在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。

简短消息从屏幕边缘滑入或淡入，停留片刻后离开；堆叠的提示会移动让出位置。

在[应用位置]添加“消息提示滑入”(Toast Slide-In)，也叫 snackbar 或 toast notification。
每条消息从屏幕边缘向上滑入并淡入，平滑减速；有新提示出现时，已显示的提示要平滑移动让出位置。
在不抢走焦点的前提下把消息播报给屏幕阅读器，显示时间要足够阅读，鼠标悬停或获得焦点时暂停自动关闭。

悬停片刻后，一个小标签在元素旁一边轻移到位一边淡入。

在[应用位置]添加“文字提示淡入”(Tooltip Fade)，也叫 tooltip reveal。
鼠标悬停片刻后，标签在元素旁一边轻移到位一边淡入；指针离开时立即快速消失，不要延迟。
键盘聚焦时也要显示，按 Escape 可关闭，并把它与元素关联起来，让屏幕阅读器能读出。