SethTrowbridge/eno
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

remove RAF in transitionend

Browse Source
This commit is contained in:
Seth Trowbridge 2023-05-30 10:17:22 -04:00
parent 03653601d8
commit cfdad61058
1 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
example/tree-menu.tsx
View File

@ -121,7 +121,6 @@ const useAway =(inRef:React.Ref<HTMLElement>, handleAway:Handler)=>
, []); , []);
}; };
type StyleSize = [classes:string, width:number, height:number]; type StyleSize = [classes:string, width:number, height:number];
type StylePack = Record<string, string>; type StylePack = Record<string, string>;
type StyleCalc = Record<string, StyleSize>; type StyleCalc = Record<string, StyleSize>;
@ -171,12 +170,9 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
} }
else else
{ {
frameRequest = requestAnimationFrame(()=> inElement.setAttribute("style", "");
{ inTransition = false;
inElement.setAttribute("style", ""); userDone(userMode);
inTransition = false;
userDone(userMode);
});
} }
} }
} }
@ -199,19 +195,19 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
if(measurements) if(measurements)
{ {
const [classes, width, height] = measurements[inState] as StyleSize; const [classes, width, height] = measurements[inState] as StyleSize;
const oldWidth = inElement.offsetWidth; const oldWidth = inElement.offsetWidth;
const oldHeight = inElement.offsetHeight; const oldHeight = inElement.offsetHeight;
inElement.style.width = oldWidth + "px"; inElement.style.width = oldWidth + "px";
inElement.style.height = oldHeight + "px"; inElement.style.height = oldHeight + "px";
inTransition = true; inTransition = true;
frameRequest = requestAnimationFrame(()=> frameRequest = requestAnimationFrame(()=>
{ {
inElement.style.height = height + "px"; inElement.style.height = height + "px";
inElement.style.width = width + "px"; inElement.style.width = width + "px";
inElement.className = classes; inElement.className = classes;
}); });
} }
} }
else else