Drag-to-Reorder List (拖拽排序列表)
别称 Reorder, Sortable list
拖动某一项时，其他项滑开让位，并按新的顺序排好。
适用场景
看板、可排序的设置项、播放列表
变体
- vertical list
- grid sortable
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。相似的动效
- 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
拖动试试
Drag (拖拽)
别称 Draggable, Drag constraints
拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。
适用场景
滑块、可排序卡片
在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。- A
- B
- C
- D
- E
- F
- G
- H
点击试试
Masonry / Grid Shuffle (瀑布流重排)
别称 Isotope filter, Filterable grid animation
应用筛选或排序时，网格中的卡片重新排列、淡出或滑到新的位置。
适用场景
作品集筛选、图库
在[应用位置]添加“瀑布流重排”(Masonry / Grid Shuffle)效果，也叫可筛选网格动画(filterable grid animation)。
应用筛选时，不再匹配的卡片在原地缩小并淡出，剩下的卡片平滑地滑到新位置；清除筛选时反向播放。
网格高度变化时不要让周围页面跳动；筛选控件要用真正的按钮，并标明当前选中的是哪个筛选。Component & Layout 中的其他动效
A
Drawer Slide (抽屉滑入)
别称 Off-canvas, Side sheet, Slide-over, Navigation drawer
侧边面板从左、右或顶部边缘滑入，推开或覆盖页面内容。
适用场景
移动端导航、设置面板、购物车
在[应用位置]添加“抽屉滑入”(Drawer Slide)，也叫画布外菜单(off-canvas)或侧边面板(side sheet)。
面板从侧边滑入并覆盖在内容上方，同时后方页面变暗，速度快、平滑减速；关闭时按同样的方式滑出。
抽屉打开时把键盘焦点留在里面，可以用 Escape 键或点击变暗区域关闭，关闭后把焦点还给打开它的按钮。