use precomputed measurements

example/app.tsx

@@ -41,18 +41,6 @@ export default ()=>
                 <p>hello!</p>
                 <p>hello!</p>
                 <p>hello!</p>
-                <C.Group>
-                <C.Button></C.Button>
-                <C.Menu>
-                    <p>hello!</p>
-                    <p>hello!</p>
-                    <p>hello!</p>
-                    <p>hello!</p>
-                    <p>hello!</p>
-                    <p>hello!</p>
-                    <p>hello!</p>
-                </C.Menu>
-            </C.Group>
                 <p>hello!</p>
                 <p>hello!</p>
                 <p>hello!</p>

example/tree-menu.tsx

@@ -17,19 +17,31 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=>
     const [stateGet, stateSet] = React.useContext(CTX);
     const refElement:React.MutableRefObject<HTMLElement|null> = React.useRef( null );
     const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
-    
-    const classDefault = "relative transition-all duration-700 border";
-    const classOpen = "h-auto w-auto top-10 px-4 ";
-    const classShut = "h-0 w-[300px] top-0 px-0";
 
-    window.TwindInst(classDefault);
+    type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string};
-    window.TwindInst(classOpen);
+    const Classes:MenuClassStates =
-    window.TwindInst(classShut);
+    {
+      Keep: "relative transition-all border",
+      Open: "h-auto w-auto    top-10 duration-700",
+      Shut: "h-0    w-[300px] top-0  duration-300",
+      Move: "",
+      Exit: "h-auto w-auto top-36 px-4 opacity-0"
+    };
+    const Window = window as {TwindInst?:(c:string)=>string};
+    if(Window.TwindInst)
+    {
+      for(let stateName in Classes)
+      {
+        Classes[stateName as keyof MenuClassStates] = Window.TwindInst(Classes[stateName as keyof MenuClassStates]);
+      }
+    }
 
     React.useEffect(()=>refControl.current = Collapser(refElement.current as HTMLElement, true), []);
     React.useEffect(()=> {refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}))}, [stateGet.open])
 
-    return <div class={classDefault} data-class={classDefault} data-class-open={classOpen} data-class-shut={classShut} ref={refElement as React.Ref<HTMLDivElement>}>{props.children}</div>;
+    return <div class={Classes.Keep} data-class-keep={Classes.Keep} data-class-open={Classes.Open} data-class-shut={Classes.Shut} ref={refElement as React.Ref<HTMLDivElement>}>
+      { (!stateGet.open && stateGet.done) ? null : props.children}
+    </div>;
 };
 
 export const Button =()=>
@@ -49,22 +61,54 @@ export function Collapser(inElement:HTMLElement, initialState = false)
     let userDone:DoneCallback = (openState) => {};
     let userMode = initialState;
     let frameRequest = 0;
+    let inTransition = false;
 
-    const done = (inEvent:TransitionEvent)=>
+    let transitions = new Set();
+    let measurements = false;
+
+    const run = (inEvent:TransitionEvent)=>
     {
-      if (inEvent.propertyName == "height" && inEvent.target == inElement)
+      if (inEvent.target == inElement)
       {
-        inEvent.stopPropagation();
+        transitions.add(inEvent.propertyName);
-        if (userMode)
-        {
-          inElement.style.height = "";
-          inElement.style.width = "";
-          inElement.style.overflow = "visible";
-        }
-        userDone(userMode);
       }
     };
-    inElement.addEventListener("transitionend", done);
+
+    const end = (inEvent:TransitionEvent)=>
+    {
+      if (inEvent.target == inElement)
+      {
+        transitions.delete(inEvent.propertyName);
+        if(transitions.size === 0)
+        {
+          if (userMode)
+          {
+            inElement.setAttribute("style", "");
+          }
+          inTransition = false;
+          userDone(userMode);          
+        }
+
+      }
+    };
+
+    const getMeasurements =(inClasses:Record<string, string>)=>
+    {
+      inElement.setAttribute("style", `transition: none;`);
+      const initialClasses = inElement.getAttribute("class")||"";
+      const output = {} as Record<string, {width:number, height:number}>;
+      Object.entries(inClasses).forEach(([key, value])=>
+      {
+        inElement.setAttribute("class", value);
+        output[key] = { width: inElement.clientWidth, height: inElement.clientHeight };
+      });
+      inElement.removeAttribute("style");
+      inElement.setAttribute("class", initialClasses);
+      return output;
+    };
+  
+    inElement.addEventListener("transitionend", end);
+    inElement.addEventListener("transitionrun", run);
 
     return function(inOpen, inMs, inDone)
     {
@@ -75,47 +119,37 @@ export function Collapser(inElement:HTMLElement, initialState = false)
         userDone = inDone|| ((m)=>{}) as DoneCallback;
         userMode = inOpen === true;
 
-        // 1) capture current state and possible classes
+        if((inOpen || !measurements) && !inTransition)
-        const h1 = inElement.clientHeight;
+        {
-        const w1 = inElement.clientWidth;
+          measurements = getMeasurements({
-        const classesInitial = inElement.getAttribute("class");
+            Open: inElement.getAttribute("data-class-open")||"",
-        const classesStart = inElement.getAttribute("data-class");
+            Shut: inElement.getAttribute("data-class-shut")||"",
-        const classesEnd = inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
+          });
-      
+        }
-        // 2) disable transitions to get immediate results
+        else
-        inElement.style.transition = "none";
+        {
-        inElement.style.height = "";
+          console.log("inbterrupt");
-        inElement.style.width = "";
+        }
 
-        // 3) add new classes and capture new height
+        inElement.style.width = inElement.clientWidth + "px";
-        inElement.className = classesStart + " " + classesEnd;
+        inElement.style.height = inElement.clientHeight + "px";
-        const h2 = inElement.clientHeight;
-        const w2 = inElement.clientWidth;
-
-        // 4) put everything back (and turn on overflow hidden)
-        inElement.style.height = h1+"px";
-        inElement.style.width = w1+"px";
         inElement.style.overflow = "hidden";
-        inElement.className = classesInitial;
 
-        console.log(`BEFORE classes:"${inElement.className}" width:"${w1}" height:"${h1}"`);
+        inTransition = true;
 
         frameRequest = requestAnimationFrame(()=>
         {
-          inElement.style.transition = "";
+          const measure = inOpen ? measurements.Open : measurements.Shut;
-          frameRequest = requestAnimationFrame(()=>
+          inElement.style.width = measure.width + "px";
-          {
+          inElement.style.height = measure.height + "px";
-              inElement.style.height = `${h2}px`;
+          inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`);
-              inElement.style.width = `${w2}px`;
-              inElement.className = classesStart + " " + classesEnd;
-              console.log(`AFTER classes:"${inElement.className}" width:"${w2}" height:"${h2}"`);
-          });
           
         });
       }
       else
       {
-        inElement.removeEventListener("transitionend", done);
+        inElement.removeEventListener("transitionrun", run);
+        inElement.removeEventListener("transitionend", end);
       }
     } as CollapseControls;
 }