refactor(component): use react-transition-state to simplify exit animation (#5923)

## **User description**
use react-transition-state to simplify exit animation

___

## **Type**
enhancement

___

## **Description**
- Integrated `react-transition-state` for managing animations in `ResizePanel` and `CMDKModal` components, simplifying the code and improving maintainability.
- Introduced a shared animation timeout variable to standardize animation durations across components.
- Added `react-transition-state` to dependencies to enable the new animation handling.

___

## **Changes walkthrough**
<table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
      <summary><strong>resize-panel.tsx</strong><dd><code>Integrate `react-transition-state` for Resize Panel Animations</code></dd></summary>
<hr>

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

<li>Introduced <code>useTransition</code> hook from <code>react-transition-state</code> for managing <br>animations.<br> <li> Added a constant for animation timeout and applied it to the <br>transition.<br> <li> Utilized the transition state to toggle the open state of the resize <br>panel.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-a4d6e633862f63f97c167ff41ba62aff8aebf3e3b2f6e7ce13d5a0e22e8ff287">+12/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
      <summary><strong>modal.css.ts</strong><dd><code>Use Variable for Animation Timeout in Modal CSS</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

packages/frontend/core/src/components/pure/cmdk/modal.css.ts

<li>Created a variable for animation timeout.<br> <li> Updated animation durations to use the new timeout variable.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-ba8935611b9c1695153d92d08ecb0f7dac73a6197f54ccda5a6e791902cd651d">+6/-3</a>&nbsp; &nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
      <summary><strong>modal.tsx</strong><dd><code>Simplify CMDK Modal Animation with `react-transition-state`</code></dd></summary>
<hr>

packages/frontend/core/src/components/pure/cmdk/modal.tsx

<li>Replaced custom animation state management with <code>useTransition</code> hook.<br> <li> Removed old animation state logic and simplified the component.<br> <li> Added animation timeout variable and applied it to the transition.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-ab3fe66c9b1d3a691fafd1aebc9988e840fedfcd09b5b89570838a5a2a9469c9">+13/-33</a>&nbsp; </td>

</tr>
</table></td></tr><tr><td><strong>Dependencies</strong></td><td><table>
<tr>
  <td>
    <details>
      <summary><strong>package.json</strong><dd><code>Add `react-transition-state` Dependency</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

packages/frontend/core/package.json

- Added `react-transition-state` as a dependency.

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-23e0e5dc0ceb004a0a5d3d13e7d00545de7487535ca0e5eab4c5047f1e24eff0">+1/-0</a>&nbsp; &nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

___

> ✨ **PR-Agent usage**:
>Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -5,6 +5,7 @@ export const resizeHandleOffsetVar = createVar('resize-handle-offset');
 export const resizeHandleVerticalPadding = createVar(
   'resize-handle-vertical-padding'
 );
+export const animationTimeout = createVar();
 export const root = style({
   vars: {
     [panelWidthVar]: '256px',
@@ -30,13 +31,14 @@ export const root = style({
       marginRight: `calc(${panelWidthVar} * -1)`,
     },
     '&[data-enable-animation="true"]': {
-      transition: 'margin-left .3s .05s, margin-right .3s .05s, width .3s .05s',
+      transition: `margin-left ${animationTimeout} .05s, margin-right ${animationTimeout} .05s, width ${animationTimeout} .05s`,
     },
     '&[data-is-floating="false"][data-transparent=true]': {
       backgroundColor: 'transparent',
     },
-    '&[data-enable-animation="false"][data-open="false"]': {
-      display: 'none',
+    '&[data-transition-state="exited"]': {
+      // avoid focus on hidden panel
+      visibility: 'hidden',
     },
   },
 });

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -2,6 +2,7 @@ import { assertExists } from '@blocksuite/global/utils';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { useTransition } from 'react-transition-state';
 
 import * as styles from './resize-panel.css';
 
@@ -116,6 +117,7 @@ const ResizeHandle = ({
   );
 };
 
+// delay initial animation to avoid flickering
 function useEnableAnimation() {
   const [enable, setEnable] = useState(false);
   useEffect(() => {
@@ -126,6 +128,8 @@ function useEnableAnimation() {
   return enable;
 }
 
+const animationTimeout = 300;
+
 export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
   function ResizePanel(
     {
@@ -150,15 +154,23 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
   ) {
     const enableAnimation = useEnableAnimation() && _enableAnimation;
     const safeWidth = Math.min(maxWidth, Math.max(minWidth, width));
+    const [{ status }, toggle] = useTransition({
+      timeout: animationTimeout,
+    });
+    useEffect(() => {
+      toggle(open);
+    }, [open]);
     return (
       <div
         {...rest}
         ref={ref}
         style={assignInlineVars({
           [styles.panelWidthVar]: `${safeWidth}px`,
+          [styles.animationTimeout]: `${animationTimeout}ms`,
         })}
         className={clsx(className, styles.root)}
         data-open={open}
+        data-transition-state={status}
         data-is-floating={floating}
         data-handle-position={resizeHandlePos}
         data-enable-animation={enableAnimation && !resizing}