Swipe to Delete (滑动删除)
别称 Swipe actions, Swipe to reveal
横向滑动列表行，露出删除或归档等操作按钮。
适用场景
邮件列表、待办清单
变体
- swipe left/right actions
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“滑动删除”(Swipe to Delete)交互，也叫 swipe actions 或 swipe to reveal。
横向拖动某一行时，它直接跟着手指移动，露出后面的归档、删除等操作按钮，按钮完全露出后停住；松开后平滑地滑到位，不要回弹。
横向滑动时仍要保证纵向滚动可用，并让键盘和屏幕阅读器用户无需滑动也能执行相同操作。相似的动效
A
拖动试试
Drag (拖拽)
别称 Draggable, Drag constraints
拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。
适用场景
滑块、可排序卡片
在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。- A
- B
- C
- D
点击试试
List Item Enter/Exit (列表项进出)
别称 AnimatePresence, TransitionGroup, Animated list
列表项添加时淡入并滑入，删除时以动画退出，相邻项随之补上空位。
适用场景
待办清单、通知、购物车商品
在[应用位置]添加“列表项进出”(List Item Enter/Exit)动画，也叫动画列表(animated list)。
新项先撑开自己的空间，再淡入并滑入；被删除的项先淡出，再收起高度，让相邻项平滑地补上空位。
被删除的项要等退出动画结束后才移除，这样添加或删除项目时列表不会跳动。ABCD
点击试试
Card Stack (卡片堆叠)
别称 Stacked cards, Cards effect
卡片略微错开地叠在一起，最上面的卡片移开，露出下一张。
适用场景
用户评价、滑动卡组
在[应用位置]添加“卡片堆叠”(Card Stack)，也叫 stacked cards。
把卡片略微错开地一张张叠在后面；每次点击，最上面的卡片向一侧甩开并塞到最后，其余卡片依次前移：平滑，轻快利落。
支持键盘操作，让屏幕阅读器能按顺序访问每张卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。Micro-interaction 中的其他动效
点击试试
Toggle Switch (开关切换)
别称 Switch, Switch Thumb Slide
圆形滑块沿轨道滑动，轨道颜色在关和开之间切换。
适用场景
设置、深色模式
在[应用位置]添加“开关切换”(Toggle Switch)动画，也叫 switch。
打开或关闭时，圆形滑块平滑地滑到轨道另一端，同时轨道颜色随之变化：快速、干脆，不要弹跳。
做成真正可访问的开关(带 checked 状态的 role="switch")，并且支持键盘操作。A
1
点击试试
Add to Cart Fly (加购抛物线)
别称 Fly to cart, Add-to-cart animation
商品图片一边缩小一边沿弧线飞入购物车图标。
适用场景
电商
在[应用位置]添加“加购抛物线”(Add to Cart Fly)动画，也叫飞入购物车(fly to cart)或加购动画(add-to-cart animation)。
点击加购按钮时，商品图片的一个小副本一边缩小，一边沿一条流畅而快速的弧线飞入购物车图标，购物车在数量更新时轻轻弹一下。
每次点击只播放一次，不要移动原来的商品卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就省略飞行动画，但照常更新购物车。点击试试
Checkbox Check Draw (复选框勾选绘制)
别称 Animated checkbox, Checkmark draw
勾选时，方框内的对勾一笔一笔地画出来。
适用场景
表单、待办清单
在[应用位置]添加“复选框勾选绘制”(Checkbox Check Draw)动画，也叫动画复选框(animated checkbox)或对勾绘制(checkmark draw)。
勾选时，方框填充颜色，对勾以一笔快速流畅的线条自己画出来；取消勾选时以同样方式擦除。
保持它是带选中状态的真正复选框，可以用键盘操作，并有清晰可见的焦点环。