From 5eefd9c2e4f948cddecf313231afdc62aa1531cd Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Mon, 23 Sep 2024 00:51:22 +0800 Subject: feat(layout): transition to reduce height of empty block --- src/dumbymap.mjs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'src/dumbymap.mjs') 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) -- cgit v1.2.3-70-g09d2