Handle beforematch with CSS animations

Author: mj12albert

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

@@ -28,7 +28,7 @@ function Collapsible(props: {
     keepMounted = true,
     defaultOpen = false,
     id,
-    hiddenUntilFound: hiddenUntilFoundProp = false,
+    hiddenUntilFound: hiddenUntilFoundProp = true,
   } = props;
 
   const [open, setOpen] = React.useState(defaultOpen);
@@ -333,7 +333,7 @@ function Collapsible(props: {
 
     setHeight(panel.scrollHeight);
 
-    if (!shouldCancelInitialOpenAnimationRef.current) {
+    if (!shouldCancelInitialOpenAnimationRef.current && !isBeforeMatchRef.current) {
       panel.style.removeProperty('animation-name');
     }
 
@@ -358,12 +358,7 @@ function Collapsible(props: {
   useEnhancedEffect(() => {
     const panel = panelRef.current;
 
-    if (
-      panel &&
-      hiddenUntilFoundProp &&
-      animationTypeRef.current === 'css-transition' &&
-      isHidden
-    ) {
+    if (panel && hiddenUntilFoundProp && isHidden) {
       /**
        * React only supports a boolean for the `hidden` attribute and forces
        * legit string values to booleans so we have to force it back in the DOM
@@ -376,7 +371,9 @@ function Collapsible(props: {
        * to `'until-found'` as they could have different `display` properties:
        * https://github.com/tailwindlabs/tailwindcss/pull/14625
        */
-      panel.setAttribute('data-starting-style', '');
+      if (animationTypeRef.current === 'css-transition') {
+        panel.setAttribute('data-starting-style', '');
+      }
     }
   }, [hiddenUntilFoundProp, isHidden]);