@llui/transitions 0.0.1 → 0.0.2
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 +53 -3
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,13 +1,63 @@
|
|
|
1
1
|
# @llui/transitions
|
|
2
2
|
|
|
3
|
-
Animation helpers for [LLui](https://github.com/fponticelli/llui).
|
|
4
|
-
|
|
5
|
-
`transition()` core + `fade`, `slide`, `scale`, `collapse` presets. Works with `branch`/`show`/`each` enter/leave hooks. Includes `flip()` for FLIP reorder animations and `mergeTransitions()` for combining.
|
|
3
|
+
Animation helpers for [LLui](https://github.com/fponticelli/llui) structural primitives. Works with `show`, `branch`, and `each`.
|
|
6
4
|
|
|
7
5
|
```bash
|
|
8
6
|
pnpm add @llui/transitions
|
|
9
7
|
```
|
|
10
8
|
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import { fade, slide, mergeTransitions } from '@llui/transitions'
|
|
13
|
+
import { div } from '@llui/dom'
|
|
14
|
+
|
|
15
|
+
// Fade + slide on a show block
|
|
16
|
+
view({ show, text }) {
|
|
17
|
+
show({
|
|
18
|
+
when: (s) => s.visible,
|
|
19
|
+
render: () => div({}, text((s) => s.message)),
|
|
20
|
+
...mergeTransitions(fade(), slide({ direction: 'down' })),
|
|
21
|
+
})
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## API
|
|
26
|
+
|
|
27
|
+
### Core
|
|
28
|
+
|
|
29
|
+
| Function | Description |
|
|
30
|
+
| --------------------------- | ---------------------------------------------------- |
|
|
31
|
+
| `transition({ enter, leave })` | Core transition -- define custom enter/leave animations |
|
|
32
|
+
| `mergeTransitions(a, b)` | Combine two transitions into one |
|
|
33
|
+
|
|
34
|
+
### Presets
|
|
35
|
+
|
|
36
|
+
| Function | Options | Description |
|
|
37
|
+
| -------------------- | ------------------------------- | ------------------------------ |
|
|
38
|
+
| `fade(options?)` | `duration`, `easing` | Fade in/out |
|
|
39
|
+
| `slide(options?)` | `direction`, `duration`, `easing` | Slide from direction (`up`, `down`, `left`, `right`) |
|
|
40
|
+
| `scale(options?)` | `from`, `duration`, `easing` | Scale transform in/out |
|
|
41
|
+
| `collapse(options?)` | `duration`, `easing` | Height collapse/expand |
|
|
42
|
+
| `flip(options?)` | `duration`, `easing` | FLIP reorder animation for `each()` |
|
|
43
|
+
|
|
44
|
+
### Integration
|
|
45
|
+
|
|
46
|
+
Presets return `{ enter, leave }` objects that spread directly into `show`, `branch`, or `each`:
|
|
47
|
+
|
|
48
|
+
```ts
|
|
49
|
+
// show with fade
|
|
50
|
+
show({ when: (s) => s.open, render: () => content(), ...fade() })
|
|
51
|
+
|
|
52
|
+
// each with FLIP reorder
|
|
53
|
+
each({
|
|
54
|
+
items: (s) => s.list,
|
|
55
|
+
key: (item) => item.id,
|
|
56
|
+
render: (item) => li({}, text(() => item.name)),
|
|
57
|
+
...flip({ duration: 200 }),
|
|
58
|
+
})
|
|
59
|
+
```
|
|
60
|
+
|
|
11
61
|
## License
|
|
12
62
|
|
|
13
63
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@llui/transitions",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"test": "vitest run"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
|
-
"@llui/dom": "^0.0.
|
|
20
|
+
"@llui/dom": "^0.0.2"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
23
|
"@llui/dom": "workspace:*",
|