Fixing animation bugs

src/components/compress/custom-els/MultiPanel/index.ts

@@ -22,6 +22,9 @@ async function close(content: HTMLElement) {
   content.removeAttribute('expanded');
   content.setAttribute('aria-expanded', 'false');
 
+  // Wait a microtask so other calls to open/close can get the final sizes.
+  await null;
+
   await transitionHeight(content, {
     from,
     to: 0,
@@ -37,8 +40,13 @@ async function open(content: HTMLElement) {
   content.setAttribute('expanded', '');
   content.setAttribute('aria-expanded', 'true');
 
+  const to = content.getBoundingClientRect().height;
+
+  // Wait a microtask so other calls to open/close can get the final sizes.
+  await null;
+
   await transitionHeight(content, {
-    from,
+    from, to,
     duration: 300,
   });
 

src/lib/util.ts

@@ -280,9 +280,9 @@ export async function transitionHeight(el: HTMLElement, opts: TransitionOptions)
   }
 
   el.style.height = from + 'px';
-  el.style.transition = `height ${duration}ms ${easing}`;
   // Force a style calc so the browser picks up the start value.
-  getComputedStyle(el).height;
+  getComputedStyle(el).transform;
+  el.style.transition = `height ${duration}ms ${easing}`;
   el.style.height = to + 'px';
 
   return new Promise<void>((resolve) => {