diff options
-rw-r--r-- | src/dumbymap.mjs | 5 |
1 files changed, 4 insertions, 1 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index dd96437..b1ba0c9 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -270,16 +270,19 @@ export const generateMaps = async (container, callback) => { | |||
270 | resume: true | 270 | resume: true |
271 | }) | 271 | }) |
272 | } else if (showcase.contains(target)) { | 272 | } else if (showcase.contains(target)) { |
273 | // Check placeholder is inside Semantic HTML | ||
273 | const placeholder = htmlHolder.querySelector(`[data-placeholder="${target.id}"]`) | 274 | const placeholder = htmlHolder.querySelector(`[data-placeholder="${target.id}"]`) |
274 | if (!placeholder) throw Error(`Cannot fine placeholder for map "${target.id}"`) | 275 | if (!placeholder) throw Error(`Cannot fine placeholder for map "${target.id}"`) |
276 | |||
277 | // animation from Showcase to placeholder | ||
275 | const animation = animateRectTransition(target, placeholder.getBoundingClientRect(), { duration: 300 }) | 278 | const animation = animateRectTransition(target, placeholder.getBoundingClientRect(), { duration: 300 }) |
276 | 279 | ||
280 | // Consider animation may fail, write callback | ||
277 | const afterAnimation = () => { | 281 | const afterAnimation = () => { |
278 | placeholder.parentElement.replaceChild(target, placeholder) | 282 | placeholder.parentElement.replaceChild(target, placeholder) |
279 | target.style = placeholder.style.cssText | 283 | target.style = placeholder.style.cssText |
280 | placeholder.remove() | 284 | placeholder.remove() |
281 | } | 285 | } |
282 | |||
283 | if (animation) { | 286 | if (animation) { |
284 | animation.finished | 287 | animation.finished |
285 | .then(afterAnimation) | 288 | .then(afterAnimation) |