切换转场

用于顶级屏幕之间切换的转场

切换转场

切换转场是用于顶级屏幕之间切换的转场。它类似于 Material Design 的 Fade Through 模式,旧屏幕消失后,新屏幕从较小的状态放大显示,创造自然流畅的转场效果。

演示

Loading demo...

UX 原则

何时使用?

切换转场用于在顶级独立部分之间导航。主要针对底部导航、标签切换和顶级菜单切换进行优化。

콘텐츠 관계	적합성	설명
层级关系	❌	上下级导航更适合使用深度转场。
顶级切换	✅	最适合底部导航、标签栏等独立部分之间的切换。
独立部分	✅	在不相关的顶级内容之间导航时也能自然运作。

主要用例

底部导航标签切换(首页 ↔ 搜索 ↔ 个人资料)
顶级菜单切换(仪表盘 ↔ 设置 ↔ 通知)
独立部分切换(新闻 ↔ 天气 ↔ 体育)

为什么这样运作?

旧屏幕淡出:当前屏幕简单地变透明并消失。没有缩放变化,平滑退场。
新屏幕淡入 + 放大:旧屏幕完全消失后,新屏幕从稍小的状态(0.95 缩放)开始,放大到正常大小(1.0 缩放)并显示。
顺序执行: OUT 动画完成后才开始 IN 动画,两个屏幕不会重叠,实现清晰的切换。

动效设计

OUT(离开的页面):

opacity: 1 → 0(仅淡出)
scale: 无变化

IN(进入的页面):

opacity: 0 → 1(淡入)
scale: 0.95 → 1(从小到正常大小)
开始时机: OUT 动画完成后

基本用法

底部导航设置

::code-group

import { Ssgoi } from '@ssgoi/react';
import { swap } from '@ssgoi/react/view-transitions';

<Ssgoi
  config={{
    transitions: [
      {
        from: '/home',
        to: '/search',
        transition: swap(),
        symmetric: true
      },
      {
        from: '/home',
        to: '/profile',
        transition: swap(),
        symmetric: true
      },
      {
        from: '/search',
        to: '/profile',
        transition: swap(),
        symmetric: true
      }
    ]
  }}
>
  {children}
</Ssgoi>

<script lang="ts">
  import { Ssgoi } from '@ssgoi/svelte';
  import { swap } from '@ssgoi/svelte/view-transitions';
</script>

<Ssgoi
  config={{
    transitions: [
      {
        from: '/home',
        to: '/search',
        transition: swap(),
        symmetric: true
      },
      {
        from: '/home',
        to: '/profile',
        transition: swap(),
        symmetric: true
      },
      {
        from: '/search',
        to: '/profile',
        transition: swap(),
        symmetric: true
      }
    ]
  }}
>
  <slot />
</Ssgoi>

切换转场

切换转场

演示

UX 原则

何时使用?

主要用例

为什么这样运作?

动效设计

基本用法

底部导航设置

最佳实践

良好示例

不良示例

相关转场