diff options
Diffstat (limited to 'src')
| -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) |