diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx index f260bc3..a8bf9c9 100644 --- a/example/tree-menu.tsx +++ b/example/tree-menu.tsx @@ -21,8 +21,8 @@ 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", - Open: "h-auto w-auto top-10 duration-700", + 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", Move: "", Exit: "h-auto w-auto top-36 px-4 opacity-0" @@ -83,7 +83,7 @@ export function Collapser(inElement:HTMLElement, initialState = false) { if (userMode) { - inElement.setAttribute("style", ""); + //inElement.setAttribute("style", ""); } inTransition = false; userDone(userMode); @@ -100,7 +100,8 @@ export function Collapser(inElement:HTMLElement, initialState = false) Object.entries(inClasses).forEach(([key, value])=> { inElement.setAttribute("class", value); - output[key] = { width: inElement.clientWidth, height: inElement.clientHeight }; + console.log(inElement.offsetHeight, inElement.clientHeight); + output[key] = { width: inElement.offsetWidth, height: inElement.offsetHeight }; }); inElement.removeAttribute("style"); inElement.setAttribute("class", initialClasses); @@ -125,14 +126,11 @@ export function Collapser(inElement:HTMLElement, initialState = false) Open: inElement.getAttribute("data-class-open")||"", Shut: inElement.getAttribute("data-class-shut")||"", }); - } - else - { - console.log("inbterrupt"); + console.log(measurements); } - inElement.style.width = inElement.clientWidth + "px"; - inElement.style.height = inElement.clientHeight + "px"; + inElement.style.width = inElement.offsetWidth + "px"; + inElement.style.height = inElement.offsetHeight + "px"; inElement.style.overflow = "hidden"; inTransition = true;