diff options
Diffstat (limited to 'src/utils.mjs')
-rw-r--r-- | src/utils.mjs | 52 |
1 files changed, 27 insertions, 25 deletions
diff --git a/src/utils.mjs b/src/utils.mjs index ead3002..ad9131e 100644 --- a/src/utils.mjs +++ b/src/utils.mjs | |||
@@ -18,8 +18,8 @@ export const onRemove = (element, callback) => { | |||
18 | } | 18 | } |
19 | } | 19 | } |
20 | }); | 20 | }); |
21 | obs.observe(parent, { childList: true, }); | 21 | obs.observe(parent, { childList: true }); |
22 | } | 22 | }; |
23 | 23 | ||
24 | /** | 24 | /** |
25 | * Animate transition of DOMRect, with Web Animation API | 25 | * Animate transition of DOMRect, with Web Animation API |
@@ -32,18 +32,24 @@ export const onRemove = (element, callback) => { | |||
32 | * @returns {Animation} https://developer.mozilla.org/en-US/docs/Web/API/Animation | 32 | * @returns {Animation} https://developer.mozilla.org/en-US/docs/Web/API/Animation |
33 | */ | 33 | */ |
34 | export const animateRectTransition = (element, rect, options = {}) => { | 34 | export const animateRectTransition = (element, rect, options = {}) => { |
35 | if (!element.parentElement) throw new Error("The node must already be attached"); | 35 | if (!element.parentElement) |
36 | throw new Error("The node must already be attached"); | ||
36 | 37 | ||
37 | const { width: w1, height: h1, left: x1, top: y1 } = rect | 38 | const { width: w1, height: h1, left: x1, top: y1 } = rect; |
38 | const { width: w2, height: h2, left: x2, top: y2 } = element.getBoundingClientRect() | 39 | const { |
40 | width: w2, | ||
41 | height: h2, | ||
42 | left: x2, | ||
43 | top: y2, | ||
44 | } = element.getBoundingClientRect(); | ||
39 | 45 | ||
40 | const rw = (w1 ?? w2) / w2 | 46 | const rw = (w1 ?? w2) / w2; |
41 | const rh = (h1 ?? h2) / h2 | 47 | const rh = (h1 ?? h2) / h2; |
42 | const dx = x1 - x2; | 48 | const dx = x1 - x2; |
43 | const dy = y1 - y2; | 49 | const dy = y1 - y2; |
44 | 50 | ||
45 | if (dx === 0 && dy === 0 || !isFinite(rw) || !isFinite(rh)) { | 51 | if ((dx === 0 && dy === 0) || !isFinite(rw) || !isFinite(rh)) { |
46 | return element.animate([], { duration: 0 }) | 52 | return element.animate([], { duration: 0 }); |
47 | } | 53 | } |
48 | 54 | ||
49 | const transform1 = `translate(0, 0) scale(1, 1)`; | 55 | const transform1 = `translate(0, 0) scale(1, 1)`; |
@@ -51,18 +57,14 @@ export const animateRectTransition = (element, rect, options = {}) => { | |||
51 | const keyframes = [ | 57 | const keyframes = [ |
52 | { transform: transform1, opacity: 1 }, | 58 | { transform: transform1, opacity: 1 }, |
53 | { transform: transform2, opacity: 0.3 }, | 59 | { transform: transform2, opacity: 0.3 }, |
54 | ] | 60 | ]; |
55 | if (options.resume === true) keyframes.reverse() | 61 | if (options.resume === true) keyframes.reverse(); |
56 | |||
57 | return element.animate( | ||
58 | keyframes, | ||
59 | { | ||
60 | duration: options.duration ?? 500, | ||
61 | easing: 'ease-in-out', | ||
62 | } | ||
63 | ); | ||
64 | } | ||
65 | 62 | ||
63 | return element.animate(keyframes, { | ||
64 | duration: options.duration ?? 500, | ||
65 | easing: "ease-in-out", | ||
66 | }); | ||
67 | }; | ||
66 | 68 | ||
67 | /** | 69 | /** |
68 | * Throttle for function call | 70 | * Throttle for function call |
@@ -74,13 +76,13 @@ export const animateRectTransition = (element, rect, options = {}) => { | |||
74 | export function throttle(func, delay) { | 76 | export function throttle(func, delay) { |
75 | let timerFlag = null; | 77 | let timerFlag = null; |
76 | 78 | ||
77 | return function(...args) { | 79 | return function (...args) { |
78 | const context = this | 80 | const context = this; |
79 | if (timerFlag !== null) return null | 81 | if (timerFlag !== null) return null; |
80 | 82 | ||
81 | timerFlag = setTimeout( | 83 | timerFlag = setTimeout( |
82 | () => timerFlag = null, | 84 | () => (timerFlag = null), |
83 | typeof delay === 'function' ? delay.call(context) : delay | 85 | typeof delay === "function" ? delay.call(context) : delay, |
84 | ); | 86 | ); |
85 | 87 | ||
86 | return func.call(context, ...args); | 88 | return func.call(context, ...args); |