feat: gets rotation from transform matrix and from/to sizes

Author: brenoliradev

packages/svelte/src/animate/index.js

@@ -1,5 +1,5 @@
 /** @import { FlipParams, AnimationConfig } from './public.js' */
-import { cubicOut } from '../easing/index.js';
+import { cubicOut } from '../easing/index';
 
 /**
  * The flip function calculates the start and end position of an element and animates between them, translating the x and y values.
@@ -16,12 +16,20 @@ export function flip(node, { from, to }, params = {}) {
 
 	var transform = style.transform === 'none' ? '' : style.transform;
 	var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
+
+	var m = new DOMMatrix(transform);
+
 	var dsx = from.width / to.width;
 	var dsy = from.height / to.height;
 
 	var dx = (from.left + dsx * ox - (to.left + ox)) / zoom;
 	var dy = (from.top + dsy * oy - (to.top + oy)) / zoom;
-	var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut, rotation = 0 } = params;
+	var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
+
+	const rf = Math.atan2(m.m21, m.m11) + Math.atan2(from.bottom - from.top, from.right - from.left);
+	const rt = Math.atan2(to.bottom - to.top, to.right - to.left);
+
+	const rn = normalize_angle(rf - rt);
 
 	return {
 		delay,
@@ -30,14 +38,24 @@ export function flip(node, { from, to }, params = {}) {
 		css: (t, u) => {
 			var x = u * dx;
 			var y = u * dy;
-			var r = u * rotation;
 			var sx = t + u * dsx;
 			var sy = t + u * dsy;
-			return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px) rotate(${r}deg);`;
+			var r = u * rn;
+
+			return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px) rotate(${r}rad);`;
 		}
 	};
 }
 
+/**
+ * Prevent extra flips
+ *
+ * @param {number} angle
+ */
+function normalize_angle(angle) {
+	return Math.atan2(Math.sin(angle), Math.cos(angle));
+}
+
 /**
  * @param {Element} element
  */

packages/svelte/src/animate/public.d.ts

@@ -11,7 +11,6 @@ export interface FlipParams {
 	delay?: number;
 	duration?: number | ((len: number) => number);
 	easing?: (t: number) => number;
-	rotation?: number;
 }
 
 export * from './index.js';

packages/svelte/types/index.d.ts

@@ -581,7 +581,6 @@ declare module 'svelte/animate' {
 		delay?: number;
 		duration?: number | ((len: number) => number);
 		easing?: (t: number) => number;
-		rotation?: number;
 	}
 	/**
 	 * The flip function calculates the start and end position of an element and animates between them, translating the x and y values.