astro-magic-move 0.1.1 → 0.1.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/package.json +2 -2
- package/src/MagicMove.astro +18 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "astro-magic-move",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Animated code morphing for Astro, powered by Shiki Magic Move. Build-time tokenization, zero-framework client JS, CSS-variable theming.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,4 +34,4 @@
|
|
|
34
34
|
"shiki": "^3.0.0",
|
|
35
35
|
"shiki-magic-move": "^1.3.0"
|
|
36
36
|
}
|
|
37
|
-
}
|
|
37
|
+
}
|
package/src/MagicMove.astro
CHANGED
|
@@ -103,9 +103,12 @@ const stepsJson = JSON.stringify(compiledSteps);
|
|
|
103
103
|
animateContainer: true,
|
|
104
104
|
});
|
|
105
105
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
106
|
+
if (trigger === "auto") {
|
|
107
|
+
this.currentStep = -1;
|
|
108
|
+
} else {
|
|
109
|
+
this.renderer.replace(this.steps[0]);
|
|
110
|
+
this.currentStep = 0;
|
|
111
|
+
}
|
|
109
112
|
this.setupTrigger(trigger, threshold);
|
|
110
113
|
}
|
|
111
114
|
|
|
@@ -126,9 +129,7 @@ const stepsJson = JSON.stringify(compiledSteps);
|
|
|
126
129
|
});
|
|
127
130
|
break;
|
|
128
131
|
case "auto":
|
|
129
|
-
requestAnimationFrame(() =>
|
|
130
|
-
this.animateToStep(1);
|
|
131
|
-
});
|
|
132
|
+
requestAnimationFrame(() => this.autoPlay());
|
|
132
133
|
break;
|
|
133
134
|
}
|
|
134
135
|
}
|
|
@@ -146,7 +147,17 @@ const stepsJson = JSON.stringify(compiledSteps);
|
|
|
146
147
|
this.observer.observe(this);
|
|
147
148
|
}
|
|
148
149
|
|
|
149
|
-
private async
|
|
150
|
+
private async autoPlay() {
|
|
151
|
+
const duration = Number(this.dataset.duration ?? 800);
|
|
152
|
+
for (let i = 0; i < this.steps.length; i++) {
|
|
153
|
+
await this.animateToStep(i);
|
|
154
|
+
if (i < this.steps.length - 1) {
|
|
155
|
+
await new Promise((r) => setTimeout(r, duration + 200));
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
private async animateToStep(stepIndex: number) {
|
|
150
161
|
if (!this.renderer || stepIndex === this.currentStep) return;
|
|
151
162
|
if (stepIndex < 0 || stepIndex >= this.steps.length) return;
|
|
152
163
|
|