Skip to content

Commit ac917fd

Browse files
committed
feat: gets rotation from transform matrix and from/to sizes
1 parent ac3c7bb commit ac917fd

File tree

3 files changed

+22
-6
lines changed

3 files changed

+22
-6
lines changed

packages/svelte/src/animate/index.js

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @import { FlipParams, AnimationConfig } from './public.js' */
2-
import { cubicOut } from '../easing/index.js';
2+
import { cubicOut } from '../easing/index';
33

44
/**
55
* 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 = {}) {
1616

1717
var transform = style.transform === 'none' ? '' : style.transform;
1818
var [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
19+
20+
var m = new DOMMatrix(transform);
21+
1922
var dsx = from.width / to.width;
2023
var dsy = from.height / to.height;
2124

2225
var dx = (from.left + dsx * ox - (to.left + ox)) / zoom;
2326
var dy = (from.top + dsy * oy - (to.top + oy)) / zoom;
24-
var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut, rotation = 0 } = params;
27+
var { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
28+
29+
const rf = Math.atan2(m.m21, m.m11) + Math.atan2(from.bottom - from.top, from.right - from.left);
30+
const rt = Math.atan2(to.bottom - to.top, to.right - to.left);
31+
32+
const rn = normalize_angle(rf - rt);
2533

2634
return {
2735
delay,
@@ -30,14 +38,24 @@ export function flip(node, { from, to }, params = {}) {
3038
css: (t, u) => {
3139
var x = u * dx;
3240
var y = u * dy;
33-
var r = u * rotation;
3441
var sx = t + u * dsx;
3542
var sy = t + u * dsy;
36-
return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px) rotate(${r}deg);`;
43+
var r = u * rn;
44+
45+
return `transform: ${transform} scale(${sx}, ${sy}) translate(${x}px, ${y}px) rotate(${r}rad);`;
3746
}
3847
};
3948
}
4049

50+
/**
51+
* Prevent extra flips
52+
*
53+
* @param {number} angle
54+
*/
55+
function normalize_angle(angle) {
56+
return Math.atan2(Math.sin(angle), Math.cos(angle));
57+
}
58+
4159
/**
4260
* @param {Element} element
4361
*/

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

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export interface FlipParams {
1111
delay?: number;
1212
duration?: number | ((len: number) => number);
1313
easing?: (t: number) => number;
14-
rotation?: number;
1514
}
1615

1716
export * from './index.js';

packages/svelte/types/index.d.ts

-1
Original file line numberDiff line numberDiff line change
@@ -581,7 +581,6 @@ declare module 'svelte/animate' {
581581
delay?: number;
582582
duration?: number | ((len: number) => number);
583583
easing?: (t: number) => number;
584-
rotation?: number;
585584
}
586585
/**
587586
* The flip function calculates the start and end position of an element and animates between them, translating the x and y values.

0 commit comments

Comments
 (0)