WIP 2

Author: mj12albert

docs/src/app/(private)/experiments/collapsible/animation.module.css

@@ -51,7 +51,7 @@
 
 .Root {
   --width: 320px;
-  --duration: 1000ms;
+  --duration: 1500ms;
 
   width: var(--width);
 

docs/src/app/(private)/experiments/collapsible/animation.tsx

@@ -26,8 +26,12 @@ function Collapsible(props: {
 
   // keyframe animations doesn't need data-starting/ending-style
 
-  const [height, setHeight] = React.useState<number | undefined>(undefined);
+  function initializeHeight() {
+    return open ? undefined : 0;
+  }
+  const [height, setHeight] = React.useState<number | undefined>(initializeHeight);
 
+  const latestAnimationNameRef = React.useRef<string>('none');
   // const shouldCancelInitialOpenTransitionRef = React.useRef(open);
 
   const isHidden = React.useMemo(() => {
@@ -38,27 +42,24 @@ function Collapsible(props: {
     return !open && !mounted;
   }, [keepMounted, open, mounted]);
 
-  const animationTypeRef = React.useRef<AnimationType>(null);
   const panelRef: React.RefObject<HTMLElement | null> = React.useRef(null);
 
   const handlePanelRef = useEventCallback((element: HTMLElement) => {
     if (!element) {
       return;
     }
 
-    element.style.animationDuration = '0s';
+    // element.style.animationDuration = '0s';
+    const panelStyles = getComputedStyle(element);
+    latestAnimationNameRef.current = panelStyles.animationName;
 
-    // if (height === undefined) {
-    //   // set` display: block !important` here to force layout
-    //   element.style.setProperty('display', 'block', 'important');
-    //   // measure the height
-    //   setHeight(element.scrollHeight);
-    //   element.style.removeProperty('display');
-
-    //   if (shouldCancelInitialOpenTransitionRef.current) {
-    //     element.style.animationDuration = '0s';
-    //   }
-    // }
+    if (height === undefined) {
+      // set` display: block !important` here to force layout
+      element.style.setProperty('display', 'block', 'important');
+      // measure the height
+      setHeight(element.scrollHeight);
+      element.style.removeProperty('display');
+    }
 
     // requestAnimationFrame(() => {
     //   shouldCancelInitialOpenTransitionRef.current = false;
@@ -86,18 +87,34 @@ function Collapsible(props: {
 
     if (nextOpen) {
       /* opening */
+
+      panel.style.removeProperty('display');
+
+      /* opening */
+      panel.style.height = '0px';
+
+      requestAnimationFrame(() => {
+        panel.style.removeProperty('height');
+        setHeight(panel.scrollHeight);
+      });
     } else {
       /* closing */
+      panel.style.height = `${panel.scrollHeight}px`;
+      // panel.style.removeProperty('display');
+      requestAnimationFrame(() => {
+        panel.style.removeProperty('height');
+        setHeight(0);
+      });
     }
   });
 
   return (
     <div
       className={classes.Root}
       style={{
-        // animationDuration: '0s',
         // @ts-ignore
-        '--collapsible-panel-height': height !== undefined ? `${height}px` : 'auto',
+        '--collapsible-panel-height':
+          height !== undefined ? `${height}px` : undefined,
       }}
     >
       <button
@@ -115,10 +132,9 @@ function Collapsible(props: {
           // @ts-ignore
           ref={mergedRef}
           className={classes.Panel}
-          // {...{ [open ? 'data-open' : 'data-closed']: '' }}
-          data-open=""
+          {...{ [open ? 'data-open' : 'data-closed']: '' }}
           // {...styleHooks}
-          hidden={isHidden}
+          hidden={!open}
           id={id}
         >
           <div className={classes.Content}>

docs/src/styles.css

@@ -222,6 +222,10 @@
   [data-demo]:not([data-demo='tailwind']) * {
     all: revert-layer;
   }
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: revert-layer !important;
+  }
 }
 
 @layer all {