@ssgoi/angular 6.4.0 → 6.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Angular bindings for SSGOI that give any Angular 20+ app native-feeling page transitions powered by the `@ssgoi/core` animation engine.
|
|
4
4
|
|
|
5
|
+
try this: [ssgoi.dev](https://ssgoi.dev)
|
|
6
|
+
|
|
7
|
+
## AI-Assisted Setup
|
|
8
|
+
|
|
9
|
+
Using Claude, Cursor, ChatGPT, or another AI assistant? Point it at:
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
https://ssgoi.dev/llms.txt
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
It has the full setup guide, every transition, the API, and troubleshooting — everything an agent needs to wire SSGOI into your app.
|
|
16
|
+
|
|
5
17
|
## Installation
|
|
6
18
|
|
|
7
19
|
```bash
|
|
@@ -35,10 +47,11 @@ import { fade } from "@ssgoi/angular/view-transitions";
|
|
|
35
47
|
standalone: true,
|
|
36
48
|
imports: [RouterOutlet, Ssgoi],
|
|
37
49
|
template: `
|
|
50
|
+
<!-- position: relative + z-index: 0 are required (the outgoing page is cloned with position:absolute) -->
|
|
38
51
|
<div
|
|
39
52
|
ssgoi
|
|
40
53
|
[config]="ssgoiConfig()"
|
|
41
|
-
style="position: relative; min-height: 100vh"
|
|
54
|
+
style="position: relative; z-index: 0; min-height: 100vh"
|
|
42
55
|
>
|
|
43
56
|
<router-outlet />
|
|
44
57
|
</div>
|
|
@@ -88,19 +101,42 @@ Because everything is driven by signals, Angular change detection stays minimal
|
|
|
88
101
|
|
|
89
102
|
## Available Transitions
|
|
90
103
|
|
|
91
|
-
|
|
104
|
+
Import view-level factories from `@ssgoi/angular/view-transitions`:
|
|
92
105
|
|
|
93
106
|
```typescript
|
|
94
107
|
import {
|
|
95
108
|
fade,
|
|
96
|
-
scroll,
|
|
97
109
|
drill,
|
|
98
|
-
hero,
|
|
99
110
|
slide,
|
|
111
|
+
scroll,
|
|
112
|
+
axis,
|
|
113
|
+
sheet,
|
|
114
|
+
hero,
|
|
100
115
|
zoom,
|
|
116
|
+
strip,
|
|
117
|
+
blind,
|
|
118
|
+
film,
|
|
119
|
+
rotate,
|
|
120
|
+
jaemin,
|
|
101
121
|
} from "@ssgoi/angular/view-transitions";
|
|
102
122
|
```
|
|
103
123
|
|
|
124
|
+
- `fade()` - Calm cross-fade. Safe default for unrelated pages
|
|
125
|
+
- `drill()` - iOS-style hierarchical navigation (list → detail)
|
|
126
|
+
- `slide()` - Horizontal push for tabs / sequential flows
|
|
127
|
+
- `scroll()` - Vertical page scroll for onboarding / paginated views
|
|
128
|
+
- `axis()` - Material/Flutter shared-axis swap for sibling/tab routes
|
|
129
|
+
- `sheet()` - Bottom sheet that slides up (modal-like flows)
|
|
130
|
+
- `hero()` - Shared element transition (matching `data-hero-enter-key` / `data-hero-exit-key`)
|
|
131
|
+
- `zoom()` - Card-to-detail expansion (matching `data-zoom-enter-key` / `data-zoom-exit-key`)
|
|
132
|
+
- `strip()` - 3D Y-axis perspective flip
|
|
133
|
+
- `blind()` - Window-blinds wipe reveal
|
|
134
|
+
- `film()` - Cinematic shrink + tile (gallery / lightbox)
|
|
135
|
+
- `rotate()` - Card flip between siblings
|
|
136
|
+
- `jaemin()` - Playful rotated zoom for special moments
|
|
137
|
+
|
|
138
|
+
Each factory takes the unified config: `{ paths }` (symmetric), `{ enter, exit, type? }` (directional, e.g. `drill`/`sheet`), or `{ paths }` with order deciding direction (`slide`/`scroll`/`axis`).
|
|
139
|
+
|
|
104
140
|
## Sample Configuration
|
|
105
141
|
|
|
106
142
|
```typescript
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ssgoi/angular",
|
|
3
|
-
"version": "6.4
|
|
3
|
+
"version": "6.6.4",
|
|
4
4
|
"description": "Angular bindings for SSGOI - Native app-like page transitions for Angular applications",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@ssgoi/core": "^6.4
|
|
9
|
+
"@ssgoi/core": "^6.6.4"
|
|
10
10
|
},
|
|
11
11
|
"peerDependencies": {
|
|
12
12
|
"@angular/common": "^20.0.0",
|