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

yarn.lock

@@ -269,6 +269,7 @@ __metadata:
     react-is: "npm:^18.2.0"
     react-paginate: "npm:^8.2.0"
     react-router-dom: "npm:^6.22.1"
+    react-transition-state: "npm:^2.1.1"
     react-virtuoso: "npm:~4.6.3"
     rxjs: "npm:^7.8.1"
     storybook: "npm:^7.6.17"
@@ -381,6 +382,7 @@ __metadata:
     react-error-boundary: "npm:^4.0.12"
     react-is: "npm:18.2.0"
     react-router-dom: "npm:^6.22.1"
+    react-transition-state: "npm:^2.1.1"
     react-virtuoso: "npm:~4.6.3"
     rxjs: "npm:^7.8.1"
     ses: "npm:^1.3.0"
@@ -30819,6 +30821,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-transition-state@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "react-transition-state@npm:2.1.1"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/992f6a44070c74bdcbeae4f6a2a5dd2429ab031e74a942822f9f2bd40b938e0efcdfbc0736f3f1a1003399191de9e5659397e99b4e901600cd03cc639579da54
+  languageName: node
+  linkType: hard
+
 "react-virtuoso@npm:~4.6.3":
   version: 4.6.3
   resolution: "react-virtuoso@npm:4.6.3"