别称 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素从严重模糊的状态逐渐变清晰,常伴随滑入或淡入。
在[应用位置]添加“模糊进入”(Blur In)入场动画,也叫 text focus in、focus in 或 blur text reveal。
内容从严重模糊且透明的状态开始,在原地逐渐变清晰:柔和、偏慢,没有位移。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示清晰的文字。
别称 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
旧内容先完全淡出,新内容再带着轻微缩放淡入。
在[应用位置]添加“淡出淡入”(Fade Through)页面过渡,也叫 fade-through transition 或 out-in route 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。
导航时,旧页面淡出,新页面同时在同一区域淡入:柔和,而且相当快。
让两个页面保持在同一位置,淡化过程中不能有任何位移;切换后把焦点移到新页面的主标题上。
别称 Fade In Up, Reveal on Scroll
元素在淡入的同时向上移动一小段距离,仿佛落到自己的位置上。
在[应用位置]添加“上浮淡入”(Fade Up)入场动画,也叫 fade-in-up 或滚动显现(reveal on scroll)。
元素第一次滚动进入视口时,一边轻微上移一边淡入:要含蓄、迅速,不要有弹跳感。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示,不做动画。