List Item Enter/Exit (列表项进出)
别称 AnimatePresence, TransitionGroup, Animated list
列表项添加时淡入并滑入，删除时以动画退出，相邻项随之补上空位。
适用场景
待办清单、通知、购物车商品
变体
- fade + slide
- height collapse
- staggered entrance
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“列表项进出”(List Item Enter/Exit)动画，也叫动画列表(animated 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
- E
- F
- G
- H
点击试试
Masonry / Grid Shuffle (瀑布流重排)
别称 Isotope filter, Filterable grid animation
应用筛选或排序时，网格中的卡片重新排列、淡出或滑到新的位置。
适用场景
作品集筛选、图库
在[应用位置]添加“瀑布流重排”(Masonry / Grid Shuffle)效果，也叫可筛选网格动画(filterable grid animation)。
应用筛选时，不再匹配的卡片在原地缩小并淡出，剩下的卡片平滑地滑到新位置；清除筛选时反向播放。
网格高度变化时不要让周围页面跳动；筛选控件要用真正的按钮，并标明当前选中的是哪个筛选。Stagger (交错动画)
别称 Staggered Animation, Cascade
一组元素依次以微小的时间差播放动画，形成波浪般的效果，而不是同时出现。
适用场景
列表、网格、导航菜单和搜索结果
在[应用位置]添加“交错动画”(Stagger)，也叫 staggered animation 或级联(cascade)。
让各项以短而均匀的间隔依次上浮出现，整体看起来像一道快速的波浪，而不是同时出现。
即使列表很长也要让整个过程保持简短；滚动进入视口时只播放一次；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示，不做动画。拖动试试
Swipe to Delete (滑动删除)
别称 Swipe actions, Swipe to reveal
横向滑动列表行，露出删除或归档等操作按钮。
适用场景
邮件列表、待办清单
在[应用位置]添加“滑动删除”(Swipe to Delete)交互，也叫 swipe actions 或 swipe to reveal。
横向拖动某一行时，它直接跟着手指移动，露出后面的归档、删除等操作按钮，按钮完全露出后停住；松开后平滑地滑到位，不要回弹。
横向滑动时仍要保证纵向滚动可用，并让键盘和屏幕阅读器用户无需滑动也能执行相同操作。Component & Layout 中的其他动效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (跑马灯)
别称 Ticker, Infinite Scroll Text
一行内容横向无缝地无限循环滚动。
适用场景
Logo 墙、公告条、关键词横幅和新闻滚动条
在[应用位置]添加“跑马灯”(Marquee)，即水平方向无限滚动的条带，也叫 ticker。
内容从右向左以缓慢、匀速的速度滚动，无缝循环，衔接处不能出现跳动。
鼠标悬停时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则停止滚动。A
Modal Scale-Fade In (弹窗缩放淡入)
别称 Dialog open animation, Zoom-fade dialog
对话框在变暗的页面上方，从中心略微放大并淡入。
适用场景
确认对话框、浮层中的表单
在[应用位置]添加“弹窗缩放淡入”(Modal Scale-Fade In)动画，也叫对话框打开动画(dialog open animation)或缩放淡入对话框(zoom-fade dialog)。
后方页面变暗的同时，对话框从中心略微放大并淡入：快速、含蓄，不要回弹。
每次打开对话框都播放一次，把焦点移入对话框并留在里面；如果用户开启了“减少动态效果”(prefers-reduced-motion)，只用简单的淡入。