1
1
/** @import { FlipParams, AnimationConfig } from './public.js' */
2
- import { cubicOut } from '../easing/index.js ' ;
2
+ import { cubicOut } from '../easing/index' ;
3
3
4
4
/**
5
5
* 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 = {}) {
16
16
17
17
var transform = style . transform === 'none' ? '' : style . transform ;
18
18
var [ ox , oy ] = style . transformOrigin . split ( ' ' ) . map ( parseFloat ) ;
19
+
20
+ var m = new DOMMatrix ( transform ) ;
21
+
19
22
var dsx = from . width / to . width ;
20
23
var dsy = from . height / to . height ;
21
24
22
25
var dx = ( from . left + dsx * ox - ( to . left + ox ) ) / zoom ;
23
26
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 ) ;
25
33
26
34
return {
27
35
delay,
@@ -30,14 +38,24 @@ export function flip(node, { from, to }, params = {}) {
30
38
css : ( t , u ) => {
31
39
var x = u * dx ;
32
40
var y = u * dy ;
33
- var r = u * rotation ;
34
41
var sx = t + u * dsx ;
35
42
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);` ;
37
46
}
38
47
} ;
39
48
}
40
49
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
+
41
59
/**
42
60
* @param {Element } element
43
61
*/
0 commit comments