diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx index 61e1a12..96acb87 100644 --- a/example/tree-menu.tsx +++ b/example/tree-menu.tsx @@ -21,9 +21,9 @@ export const Menu =(props:{children:React.JSX.Element|React.JSX.Element[]})=> type MenuClassStates = {Keep:string, Open:string, Shut:string, Move:string, Exit:string}; const Classes:MenuClassStates = { - Keep: "relative transition-all border(8 black) top-0", - Open: "h-auto w-full top-0 duration-700", - Shut: "h-0 w-[300px] top-0 duration-300", + Keep: "relative transition-all border(8 black) ", + Open: "h-auto w-1/2 top-8 duration-700", + Shut: "h-0 w-[300px] top-0 duration-300", Move: "", Exit: "h-auto w-auto top-36 px-4 opacity-0" }; @@ -83,10 +83,11 @@ export function Collapser(inElement:HTMLElement, initialState = false) { if (userMode) { - inElement.setAttribute("style", ""); + inElement.setAttribute("style", "transition:none;"); + inElement.clientHeight; + frameRequest = requestAnimationFrame(()=>{inElement.setAttribute("style", "")}); } inTransition = false; - console.log("done", userMode); userDone(userMode); } @@ -127,23 +128,19 @@ export function Collapser(inElement:HTMLElement, initialState = false) Open: keep + inElement.getAttribute("data-class-open"), Shut: keep + inElement.getAttribute("data-class-shut"), }); - console.log(measurements); } inElement.style.overflow = "hidden"; inElement.style.width = inElement.offsetWidth + "px"; inElement.style.height = inElement.offsetHeight + "px"; - inTransition = true; - console.log("from", inElement.offsetWidth, inElement.offsetHeight ); frameRequest = requestAnimationFrame(()=> { const measure = inOpen ? measurements.Open : measurements.Shut; inElement.style.width = measure.width + "px"; inElement.style.height = measure.height + "px"; - console.log(" to", measure.width, measure.height ); inElement.className = inElement.getAttribute("data-class-keep") + " " + inElement.getAttribute(`data-class-${inOpen?"open":"shut"}`); });