Masonry / Grid Shuffle (瀑布流重排)
别称 Isotope filter, Filterable grid animation
应用筛选或排序时，网格中的卡片重新排列、淡出或滑到新的位置。
适用场景
作品集筛选、图库
变体
- filter
- sort
- shuffle
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“瀑布流重排”(Masonry / Grid Shuffle)效果，也叫可筛选网格动画(filterable grid animation)。
应用筛选时，不再匹配的卡片在原地缩小并淡出，剩下的卡片平滑地滑到新位置；清除筛选时反向播放。
网格高度变化时不要让周围页面跳动；筛选控件要用真正的按钮，并标明当前选中的是哪个筛选。相似的动效
- A
- B
- C
- D
- E
- F
点击试试
FLIP Layout Animation (FLIP布局动画)
别称 Layout animation, First-Last-Invert-Play
布局变化后，元素平滑地移动到新的位置和尺寸。
适用场景
筛选网格、重新排列的列表
在[应用位置]添加“FLIP布局动画”(FLIP Layout Animation)，也叫布局动画(layout animation)或 First-Last-Invert-Play。
布局变化时，每个元素从旧位置平滑移动到新位置，而不是直接跳过去：开始时快，最后轻柔地落定。
只用 transform 做动画，避免页面每一帧都重新排版；如果用户开启了“减少动态效果”(prefers-reduced-motion)，直接切换到新布局。- A
- B
- C
- D
点击试试
List Item Enter/Exit (列表项进出)
别称 AnimatePresence, TransitionGroup, Animated list
列表项添加时淡入并滑入，删除时以动画退出，相邻项随之补上空位。
适用场景
待办清单、通知、购物车商品
在[应用位置]添加“列表项进出”(List Item Enter/Exit)动画，也叫动画列表(animated list)。
新项先撑开自己的空间，再淡入并滑入；被删除的项先淡出，再收起高度，让相邻项平滑地补上空位。
被删除的项要等退出动画结束后才移除，这样添加或删除项目时列表不会跳动。- A
- B
- C
- D
拖动试试
Drag-to-Reorder List (拖拽排序列表)
别称 Reorder, Sortable list
拖动某一项时，其他项滑开让位，并按新的顺序排好。
适用场景
看板、可排序的设置项、播放列表
在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。Component & Layout 中的其他动效
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
点击试试
Popover / Dropdown Open (下拉菜单弹出)
别称 Menu pop, Popover pop-in, Dropdown scale-fade
浮动菜单从触发按钮所在的位置一边放大一边淡入。
适用场景
下拉菜单、弹出层、选择列表
在[应用位置]添加“下拉菜单弹出”(Popover / Dropdown Open)动画，也叫 menu pop 或 dropdown scale-fade。
菜单从触发按钮旁的角落一边微微放大一边淡入，要快速、利落；关闭时淡出得稍快一些。
让菜单始终贴着触发按钮，按 Escape 或点击外部即可关闭，并在触发按钮上向屏幕阅读器标明展开状态。ACB
点击试试
Shared Layout Animation (共享布局动画)
别称 layoutId, Shared element (in-page)
元素仿佛移动并缩放到新位置上对应的元素，看起来是同一个对象。
适用场景
选中高亮、缩略图到展开视图
在[应用位置]添加“共享布局动画”(Shared Layout Animation)，也叫页面内共享元素(in-page shared element)。
选中项变化时，元素要从旧位置平滑地移动并缩放到新位置，轻柔地落定，让人看出这是同一个对象而不是两个。
任何时刻只显示一份，移动过程中不要让周围布局跳动。