diff options
-rw-r--r-- | src/dumbymap.mjs | 15 | ||||
-rw-r--r-- | src/utils.mjs | 4 |
2 files changed, 8 insertions, 11 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 7079286..1db8437 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -267,8 +267,7 @@ export const generateMaps = async (container, callback) => { | |||
267 | const placeholder = htmlHolder.querySelector(`[data-placeholder="${target.id}"]`) | 267 | const placeholder = htmlHolder.querySelector(`[data-placeholder="${target.id}"]`) |
268 | if (!placeholder) throw Error(`Cannot fine placeholder for map "${target.id}"`) | 268 | if (!placeholder) throw Error(`Cannot fine placeholder for map "${target.id}"`) |
269 | 269 | ||
270 | // animation from Showcase to placeholder | 270 | .catch(afterAnimation) |
271 | const animation = animateRectTransition(target, placeholder.getBoundingClientRect(), { duration: 300 }) | ||
272 | 271 | ||
273 | // Consider animation may fail, write callback | 272 | // Consider animation may fail, write callback |
274 | const afterAnimation = () => { | 273 | const afterAnimation = () => { |
@@ -276,13 +275,11 @@ export const generateMaps = async (container, callback) => { | |||
276 | target.style = placeholder.style.cssText | 275 | target.style = placeholder.style.cssText |
277 | placeholder.remove() | 276 | placeholder.remove() |
278 | } | 277 | } |
279 | if (animation) { | 278 | |
280 | animation.finished | 279 | // animation from Showcase to placeholder |
281 | .then(afterAnimation) | 280 | animateRectTransition(target, placeholder.getBoundingClientRect(), { duration: 300 }) |
282 | .catch(afterAnimation) | 281 | .finished |
283 | } else { | 282 | .finally(afterAnimation) |
284 | afterAnimation() | ||
285 | } | ||
286 | } | 283 | } |
287 | }) | 284 | }) |
288 | // }}} | 285 | // }}} |
diff --git a/src/utils.mjs b/src/utils.mjs index eeedb81..41b772e 100644 --- a/src/utils.mjs +++ b/src/utils.mjs | |||
@@ -29,7 +29,7 @@ export const onRemove = (element, callback) => { | |||
29 | * @param {Object} options | 29 | * @param {Object} options |
30 | * @param {Boolean} options.resume If true, transition starts from rect to DOMRect of element | 30 | * @param {Boolean} options.resume If true, transition starts from rect to DOMRect of element |
31 | * @param {Number} options.duration Duration of animation in milliseconds | 31 | * @param {Number} options.duration Duration of animation in milliseconds |
32 | * @returns {Animation|null} 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) throw new Error("The node must already be attached"); |
@@ -43,7 +43,7 @@ export const animateRectTransition = (element, rect, options = {}) => { | |||
43 | const dy = y1 - y2; | 43 | const dy = y1 - y2; |
44 | 44 | ||
45 | if (dx === 0 && dy === 0 || rw === Infinity || rh === Infinity) { | 45 | if (dx === 0 && dy === 0 || rw === Infinity || rh === Infinity) { |
46 | return null; | 46 | return new Animation() |
47 | } | 47 | } |
48 | 48 | ||
49 | const transform1 = `translate(0, 0) scale(1, 1)`; | 49 | const transform1 = `translate(0, 0) scale(1, 1)`; |