Convert src/runtime/animate/index.ts to JavaScript

src/runtime/animate/index.ts

@@ -1,46 +1,43 @@
 import { cubicOut } from '../easing';
 import { is_function } from '../internal';
-
+/** @param {Element} node
-// todo: same as Transition, should it be shared?
+ * @param {{ from: DOMRect; to: DOMRect }}
-export interface AnimationConfig {
+ * @param {FlipParams} params
-	delay?: number;
+ * @returns {import("/Users/elliottjohnson/dev/sveltejs/svelte/index.ts-to-jsdoc").AnimationConfig}
-	duration?: number;
+ */
-	easing?: (t: number) => number;
+export function flip(node, { from, to }, params = {}) {
-	css?: (t: number, u: number) => string;
+    const style = getComputedStyle(node);
-	tick?: (t: number, u: number) => void;
+    const transform = style.transform === 'none' ? '' : style.transform;
-}
+    const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
-
+    const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
-export interface FlipParams {
+    const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
-	delay?: number;
+    const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
-	duration?: number | ((len: number) => number);
+    return {
-	easing?: (t: number) => number;
+        delay,
+        duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
+        easing,
+        css: (t, u) => {
+            const x = u * dx;
+            const y = u * dy;
+            const sx = t + (u * from.width) / to.width;
+            const sy = t + (u * from.height) / to.height;
+            return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
+        }
+    };
 }
 
-export function flip(
-	node: Element,
-	{ from, to }: { from: DOMRect; to: DOMRect },
-	params: FlipParams = {}
-): AnimationConfig {
-	const style = getComputedStyle(node);
-	const transform = style.transform === 'none' ? '' : style.transform;
 
-	const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
-	const dx = from.left + (from.width * ox) / to.width - (to.left + ox);
-	const dy = from.top + (from.height * oy) / to.height - (to.top + oy);
 
-	const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
 
-	return {
+/** @typedef {Object} AnimationConfig
-		delay,
+ * @property {number} [delay]
-		duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
+ * @property {number} [duration]
-		easing,
+ * @property {(t:number)=>number} [easing]
-		css: (t, u) => {
+ * @property {(t:number,u:number)=>string} [css]
-			const x = u * dx;
+ * @property {(t:number,u:number)=>void} [tick] 
-			const y = u * dy;
+ */
-			const sx = t + (u * from.width) / to.width;
+/** @typedef {Object} FlipParams
-			const sy = t + (u * from.height) / to.height;
+ * @property {number} [delay]
-
+ * @property {number|((len:number)=>number)} [duration]
-			return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
+ * @property {(t:number)=>number} [easing] 
-		}
+ */
-	};
-}