Carousel Crossfade (轮播交叉淡化)
别称 Fade slideshow, Carousel fade
幻灯片停在原处，彼此交叉淡化切换，而不是滑动。
适用场景
首屏轮播、用户评价
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“轮播交叉淡化”(Carousel Crossfade)，也叫淡入淡出幻灯片(fade slideshow)或轮播淡化(carousel fade)。
幻灯片停在原处，缓慢地交叉淡化：旧的一张淡出的同时，下一张淡入，然后停留几秒再切换到下一张。
无缝循环回到第一张，鼠标悬停或获得焦点时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，不要自动切换。相似的动效
A
B
点击试试
Crossfade Page Transition (页面交叉淡化)
别称 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
旧页面淡出的同时，新页面在同一区域淡入。
适用场景
默认的路由切换
在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。A
B
C
点击试试
Carousel Slide (轮播滑动)
别称 Slider, Swipe carousel, Scroll-snap carousel
幻灯片在可视区域内水平移动，每次吸附一张到位。
适用场景
首屏横幅、商品图库
在[应用位置]添加“轮播滑动”(Carousel Slide)，也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动，使下一张幻灯片吸附到中间，平滑减速；两侧边缘露出相邻的幻灯片，位置圆点也跟着变化。
每次只移动一张，除了按钮和方向键，也支持触屏滑动，并给控件加上供屏幕阅读器读取的标签。A
B
点击试试
Fade Through (淡出淡入)
别称 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
旧内容先完全淡出，新内容再带着轻微缩放淡入。
适用场景
在互不相关的页面之间切换
在[应用位置]添加“淡出淡入”(Fade Through)页面过渡，也叫 fade-through transition 或 out-in route transition。
旧内容先快速、完全地淡出，然后新内容一边微微放大到位一边淡入。
两者绝不能重叠，新内容放大时布局也不能发生位移。ABCDE
拖动试试
Coverflow (封面流)
别称 Cover flow carousel
中间的项目正对前方，两侧的项目透视斜向后方。
适用场景
专辑和媒体轮播
在[应用位置]添加“封面流”(Coverflow)轮播，也叫 cover flow carousel。
中间的项目正对前方，两侧的项目透视地转向后方；横向拖动时整排滑动，松手后平滑地停在最近的项目上。
除拖动外还要支持方向键和滑动手势，并保证触屏设备上页面仍能正常纵向滚动。Component & Layout 中的其他动效
BC
A
A
点击试试
Container Transform (容器变换)
别称 Card expand to detail, Expandable card, Morph card to page
卡片展开成完整的详情视图，始终是同一个可见容器在改变形状并显示新内容。
适用场景
列表卡片到详情、悬浮按钮到面板
在[应用位置]添加“容器变换”(Container Transform)过渡，也叫卡片展开到详情(card expand to detail)或可展开卡片(expandable card)。
打开卡片时，同一个容器平滑地扩展成完整的详情视图：旧内容迅速淡出，容器快要展开完时新内容再淡入；关闭时反向播放。
始终保持一个连续的容器，而不是在两个独立的框之间交叉淡化；打开后把焦点移到详情视图里。- A
- B
- C
- D
拖动试试
Drag-to-Reorder List (拖拽排序列表)
别称 Reorder, Sortable list
拖动某一项时，其他项滑开让位，并按新的顺序排好。
适用场景
看板、可排序的设置项、播放列表
在[应用位置]添加“拖拽排序列表”(Drag-to-Reorder List)，也叫可排序列表(sortable list)。
被拖动的项直接跟随指针并轻微抬起，其他项平滑地滑开让位；松开后，它迅速落入最近的位置。
同时支持触屏和鼠标，并提供用键盘移动项目的方式，把新位置播报给屏幕阅读器。