콘텐츠 관계	적합성	설명
无关内容	❌	独立部分建议使用淡入淡出
兄弟关系	✅	最适合同级顺序内容
层级关系	❌	父子结构建议使用 Hero 或 Pinterest

主要用例

章节导航：文档或指南部分之间的移动
引导流程：分步教程或设置过程
时间线：按时间顺序排列的内容
故事叙述：故事形式的顺序内容

为什么这样工作？

自然阅读流：与从上到下阅读的自然模式一致
与滚动手势一致：用户熟悉的滚动动作的延伸
顺序感知：直观理解内容的前后关系

动效设计

向上方向（下一个）：
离开屏幕：向上推出（之前内容向上）
进入屏幕：从下方上升（下一内容出现）

向下方向（上一个）：
离开屏幕：向下移动（当前内容向下）
进入屏幕：从上方下降（之前内容返回）

基本用法

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

const config = {
  defaultTransition: scroll()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* 应用内容 */}
    </Ssgoi>
  );
}

实践示例

1. 文档导航

章节或部分之间的移动：

const config = {
  transitions: [
    {
      from: '/docs/intro',
      to: '/docs/getting-started',
      transition: scroll({ direction: 'up' }),
      symmetric: true  // 返回时自动向下
    },
    {
      from: '/docs/getting-started',
      to: '/docs/api',
      transition: scroll({ direction: 'up' }),
      symmetric: true
    }
  ]
};

2. 引导流程

分步教程：

const config = {
  transitions: [
    {
      from: '/onboarding/step-*',
      to: '/onboarding/step-*',
      transition: scroll({ 
        direction: 'up',
        spring: { stiffness: 300, damping: 30 }
      })
    }
  ]
};

3. 通过中间件动态方向

根据导航顺序自动决定方向：

const createMiddleware = (routes) => {
  return (from, to) => {
    const fromIndex = routes.indexOf(from);
    const toIndex = routes.indexOf(to);
    
    if (fromIndex < toIndex) {
      return { from: "/nav/prev", to: "/nav/next" };
    } else {
      return { from: "/nav/next", to: "/nav/prev" };
    }
  };
};

const config = {
  transitions: [
    {
      from: "/nav/prev",
      to: "/nav/next",
      transition: scroll({ direction: "up" })
    },
    {
      from: "/nav/next",
      to: "/nav/prev",
      transition: scroll({ direction: "down" })
    }
  ],
  middleware: createMiddleware(routeOrder)
};

性能优化

仅使用 transform: translateY() 利用 GPU 加速
无需布局重新计算即可保持流畅的 60fps
自动保留滚动位置，无需额外计算

无障碍性

prefers-reduced-motion 设置时禁用过渡
完全支持键盘导航
屏幕阅读器正确传达层次结构

最佳实践

✅ 应该

用于文档或指南的顺序部分移动
应用于引导或教程步骤
用于基于时间线的内容
使用 symmetric 选项保持双向一致性
与移动设备的自然滚动手势连接

❌ 不应该

不要在无关部分之间移动时使用（使用淡入淡出）
不要用于层次结构导航（使用 Hero 或 Pinterest）
不要与左右滑动混合使用（保持一致性）