SSGOI介绍

SSGOI是一个在网页上实现原生应用般流畅页面过渡动画的库。

Latest Posts

Insights on Svelte, Flutter, and web development

Understanding Svelte 5 Runes: The Future of Reactivity

Dive deep into Svelte 5's new rune system and discover how it revolutionizes state management and reactivity.

Sarah Chen•12mSvelte

Mastering Flutter Animations: From Basics to Advanced

Learn how to create beautiful, performant animations in Flutter that bring your mobile apps to life.

Michael Park•15mFlutter

Building Scalable Applications with SvelteKit

A comprehensive guide to architecting large-scale applications with SvelteKit, covering best practices, patterns, and real-world examples.

Emma Wilson•18mSvelteKit

React Server Components: A Deep Dive

Understanding the revolutionary React Server Components and how they change the way we build React applications.

Alex Johnson•10mReact

Modern CSS Techniques You Should Know in 2024

Explore the latest CSS features including Container Queries, Cascade Layers, and the :has() selector that are revolutionizing web styling.

Maria Garcia•8mCSS

Web Performance Optimization: A Comprehensive Guide

Master the art of web performance with modern techniques including Core Web Vitals optimization, resource hints, and cutting-edge loading strategies.

David Kim•14mPerformance

Advanced TypeScript Patterns for Production

Level up your TypeScript skills with advanced patterns including type guards, conditional types, and template literal types.

James Chen•12mTypeScript

为什么选择SSGOI？

1. 在所有浏览器中工作

与浏览器的Chrome View Transition API不同，SSGOI在所有现代浏览器中提供一致的体验。它确保相同的动画在Chrome、Firefox和Safari中都能正常工作。

2. 完美的服务器端渲染支持

• SSR/SSG兼容: 与Next.js、Nuxt、SvelteKit完美配合，无水合问题
• SEO友好: 动画不会影响搜索引擎优化
• 优化初始加载: 直接利用服务器渲染的HTML

3. 直接使用框架的路由

您可以在直接使用框架路由的同时添加动画。兼容所有路由方法，包括Next.js的Link、SvelteKit的goto、Vue Router等。

核心特性

// 只需几行代码即可开始
const config = {
  defaultTransition: fade(),
  transitions: [
    {
      from: '/home',
      to: '/about',
      transition: slide({ direction: 'left' })
    }
  ]
}

🎨 丰富的过渡效果

• 淡入淡出: 平滑的淡入/淡出
• 滑动: 方向性滑动
• 缩放: 放大/缩小效果
• Hero: 共享元素动画
• Pinterest: Pinterest风格展开
• 波纹: Material Design波纹效果

⚡ 优化的性能

• 基于弹簧物理的自然运动
• 小巧的打包体积（< 20KB gzipped）
• 支持Tree-shaking，只包含您使用的部分

🛠️ 对开发者友好

• 完整的TypeScript支持
• 直观的API设计
• 丰富的文档和示例
• 支持所有主流框架，包括React、Svelte、Vue

开始使用

通过下一节的快速入门指南，了解如何将SSGOI应用到您的项目中！