Simplify animation prevention

Author: andy-hook

packages/react/tabs/package.json

@@ -25,8 +25,7 @@
     "@radix-ui/react-presence": "workspace:*",
     "@radix-ui/react-primitive": "workspace:*",
     "@radix-ui/react-roving-focus": "workspace:*",
-    "@radix-ui/react-use-controllable-state": "workspace:*",
-    "@radix-ui/react-use-layout-effect": "workspace:*"
+    "@radix-ui/react-use-controllable-state": "workspace:*"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",

packages/react/tabs/src/Tabs.tsx

@@ -9,7 +9,6 @@ import { useDirection } from '@radix-ui/react-direction';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useId } from '@radix-ui/react-id';
-import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 
 import type * as Radix from '@radix-ui/react-primitive';
 import type { Scope } from '@radix-ui/react-context';
@@ -231,29 +230,11 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const isSelected = value === context.value;
     const isMountAnimationPreventedRef = React.useRef(isSelected);
-    const originalStylesRef = React.useRef<Record<string, string>>();
 
-    useLayoutEffect(() => {
-      const node = ref.current;
-
-      if (node) {
-        originalStylesRef.current = originalStylesRef.current || {
-          animationDuration: node.style.animationDuration,
-        };
-
-        // Prevent animations from running if open when initially mounted
-        const originalDuration = originalStylesRef.current.animationDuration;
-        const animationPrevented = isMountAnimationPreventedRef.current;
-
-        node.style.animationDuration = animationPrevented ? '0s' : originalDuration;
-        isMountAnimationPreventedRef.current = false;
-      }
-
-      /**
-       * Depends on `isSelected` as we want to restore the original
-       * animation when navigating away from an initially open tab.
-       */
-    }, [isSelected]);
+    React.useEffect(() => {
+      const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));
+      return () => cancelAnimationFrame(rAF);
+    }, []);
 
     return (
       <Presence present={isSelected}>
@@ -268,6 +249,10 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
             tabIndex={0}
             {...contentProps}
             ref={composedRefs}
+            style={{
+              ...props.style,
+              animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,
+            }}
           >
             {present && children}
           </Primitive.div>

yarn.lock

@@ -3675,7 +3675,6 @@ __metadata:
     "@radix-ui/react-primitive": "workspace:*"
     "@radix-ui/react-roving-focus": "workspace:*"
     "@radix-ui/react-use-controllable-state": "workspace:*"
-    "@radix-ui/react-use-layout-effect": "workspace:*"
   peerDependencies:
     react: ^16.8 || ^17.0 || ^18.0
     react-dom: ^16.8 || ^17.0 || ^18.0