feat(layout): transition to reduce height of empty block

2 files changed, 17 insertions, 1 deletions

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index b4689b9..591c9ec 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -397,6 +397,16 @@
   }
 }
 
+.dumby-block:has(pre:only-child [data-placeholder]:only-child) {
+  overflow: clip;
+
+  [data-placeholder] {
+    height: 50px !important;
+    scale: .9;
+    transition-duration: .4s;
+    transition-timing-function: ease-out;
+  }
+}
 
 .bold-options {
   font-weight: bold;
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 9665c9c..42a507f 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -250,9 +250,15 @@ export const generateMaps = async (container, callback) => {
       // Placeholder for map in Showcase, it should has the same DOMRect
       const placeholder = target.cloneNode(true)
       placeholder.classList.remove('map-container')
-      placeholder.setAttribute('data-placeholder', target.id)
       target.parentElement.replaceChild(placeholder, target)
 
+      // HACK Trigger CSS transition, if placeholde is the olny chil element in block,
+      // reduce its height to zero.
+      // To make sure the original height of placeholder is applied, callBoundingClientRect() seems work(Why?).
+      // then set data-attribute for CSS selector to change height to 0
+      placeholder.getBoundingClientRect()
+      placeholder.setAttribute('data-placeholder', target.id)
+
       // To fit showcase, remove all inline style
       target.removeAttribute('style')
       showcase.appendChild(target)