extend starting status

Author: mj12albert

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

@@ -41,7 +41,7 @@
   width: 100%;
 
   height: var(--collapsible-panel-height);
-  opacity: 1;
+  /*  opacity: 1;*/
 
   transition:
     height var(--duration) ease-out,

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

@@ -77,14 +77,14 @@ function PlainCollapsible(props: { defaultOpen?: boolean; keepMounted?: boolean
       if (!shouldCancelInitialOpenTransitionRef.current && !keepMounted) {
         // the closed transition styles must be set here to transition the first
         // opening transition when the panel is BOTH initially closed AND `keepMounted={false}`
-        console.log('handlePanelRef setting opacity 0');
-        element.style.opacity = '0';
+        // console.log('handlePanelRef setting opacity 0');
+        // element.style.opacity = '0';
 
         setHeightAndRemoveDisplayProperty(element);
 
         // after setHeight() all the transition properties need to be removed
-        console.log('handlePanelRef unsetting inline opacity');
-        element.style.removeProperty('opacity');
+        // console.log('handlePanelRef unsetting inline opacity');
+        // element.style.removeProperty('opacity');
       } else {
         setHeightAndRemoveDisplayProperty(element);
       }
@@ -95,9 +95,11 @@ function PlainCollapsible(props: { defaultOpen?: boolean; keepMounted?: boolean
     }
 
     requestAnimationFrame(() => {
-      setTimeout(() => {
-        element.style.removeProperty('transition-duration');
-        shouldCancelInitialOpenTransitionRef.current = false;
+      shouldCancelInitialOpenTransitionRef.current = false;
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          element.style.removeProperty('transition-duration');
+        });
       });
     });
   });
@@ -182,8 +184,8 @@ function PlainCollapsible(props: { defaultOpen?: boolean; keepMounted?: boolean
       // the closed transition styles must be set here to transition all opening
       // transitions except the first one when `keepMounted={false}`
       if (!shouldCancelInitialOpenTransitionRef.current) {
-        console.log('useEnhancedEffect setting opacity 0');
-        panel.style.opacity = '0';
+        // console.log('useEnhancedEffect setting opacity 0');
+        // panel.style.opacity = '0';
       }
 
       requestAnimationFrame(() => {
@@ -195,8 +197,8 @@ function PlainCollapsible(props: { defaultOpen?: boolean; keepMounted?: boolean
 
         if (!shouldCancelInitialOpenTransitionRef.current) {
           // remove all the transition properties that were just manually applied
-          console.log('useEnhancedEffect unsetting inline opacity');
-          panel.style.removeProperty('opacity');
+          // console.log('useEnhancedEffect unsetting inline opacity');
+          // panel.style.removeProperty('opacity');
         }
 
         setHeight(panel.scrollHeight);

packages/react/src/utils/useTransitionStatus.ts

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useEnhancedEffect } from './useEnhancedEffect';
 
-export type TransitionStatus = 'starting' | 'ending' | undefined;
+export type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
 
 /**
  * Provides a status string for CSS animations.
@@ -30,15 +30,18 @@ export function useTransitionStatus(open: boolean) {
     if (!open) {
       return undefined;
     }
+    if (open && mounted && transitionStatus !== 'idle') {
+      setTransitionStatus('starting');
+    }
 
     const frame = requestAnimationFrame(() => {
-      setTransitionStatus(undefined);
+      setTransitionStatus('idle');
     });
 
     return () => {
       cancelAnimationFrame(frame);
     };
-  }, [open]);
+  }, [open, mounted, setTransitionStatus, transitionStatus]);
 
   return React.useMemo(
     () => ({