diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index 559903154..24562700c 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -65,6 +65,7 @@
     "react-is": "^18.2.0",
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.22.1",
+    "react-transition-state": "^2.1.1",
     "react-virtuoso": "~4.6.3",
     "rxjs": "^7.8.1",
     "swr": "^2.2.5",
diff --git a/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts b/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
index bc3198c1a..655524ac8 100644
--- a/packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
+++ b/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',
     },
   },
 });
diff --git a/packages/frontend/component/src/components/resize-panel/resize-panel.tsx b/packages/frontend/component/src/components/resize-panel/resize-panel.tsx
index 42584bfc8..33599cb10 100644
--- a/packages/frontend/component/src/components/resize-panel/resize-panel.tsx
+++ b/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}
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index 960eaf53c..ff34f70fc 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -85,6 +85,7 @@
     "react-error-boundary": "^4.0.12",
     "react-is": "18.2.0",
     "react-router-dom": "^6.22.1",
+    "react-transition-state": "^2.1.1",
     "react-virtuoso": "~4.6.3",
     "rxjs": "^7.8.1",
     "ses": "^1.3.0",
diff --git a/packages/frontend/core/src/components/pure/cmdk/modal.css.ts b/packages/frontend/core/src/components/pure/cmdk/modal.css.ts
index e22ed36b3..a33a1d98f 100644
--- a/packages/frontend/core/src/components/pure/cmdk/modal.css.ts
+++ b/packages/frontend/core/src/components/pure/cmdk/modal.css.ts
@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { keyframes, style } from '@vanilla-extract/css';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
 const contentShow = keyframes({
   from: {
     opacity: 0,
@@ -35,6 +35,9 @@ export const modalContentWrapper = style({
   zIndex: cssVar('zIndexModal'),
   padding: '13vh 16px 16px',
 });
+
+export const animationTimeout = createVar();
+
 export const modalContent = style({
   width: 640,
   // height: 530,
@@ -51,11 +54,11 @@ export const modalContent = style({
   willChange: 'transform, opacity',
   selectors: {
     '&[data-state=entered], &[data-state=entering]': {
-      animation: `${contentShow} 120ms cubic-bezier(0.42, 0, 0.58, 1)`,
+      animation: `${contentShow} ${animationTimeout} cubic-bezier(0.42, 0, 0.58, 1)`,
       animationFillMode: 'forwards',
     },
     '&[data-state=exited], &[data-state=exiting]': {
-      animation: `${contentHide} 120ms cubic-bezier(0.42, 0, 0.58, 1)`,
+      animation: `${contentHide} ${animationTimeout} cubic-bezier(0.42, 0, 0.58, 1)`,
       animationFillMode: 'forwards',
     },
   },
diff --git a/packages/frontend/core/src/components/pure/cmdk/modal.tsx b/packages/frontend/core/src/components/pure/cmdk/modal.tsx
index 6b8102814..cd033b05d 100644
--- a/packages/frontend/core/src/components/pure/cmdk/modal.tsx
+++ b/packages/frontend/core/src/components/pure/cmdk/modal.tsx
@@ -1,5 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { useEffect, useReducer } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useEffect } from 'react';
+import { useTransition } from 'react-transition-state';
 
 import * as styles from './modal.css';
 
@@ -11,52 +13,30 @@ export interface CMDKModalProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-type ModalAnimationState = 'entering' | 'entered' | 'exiting' | 'exited';
-
-function reduceAnimationState(
-  state: ModalAnimationState,
-  action: 'open' | 'close' | 'finish'
-) {
-  switch (action) {
-    case 'open':
-      return state === 'entered' || state === 'entering' ? state : 'entering';
-    case 'close':
-      return state === 'exited' || state === 'exiting' ? state : 'exiting';
-    case 'finish':
-      return state === 'entering' ? 'entered' : 'exited';
-  }
-}
+const animationTimeout = 120;
 
 export const CMDKModal = ({
   onOpenChange,
   open,
   children,
 }: React.PropsWithChildren<CMDKModalProps>) => {
-  const [animationState, dispatch] = useReducer(reduceAnimationState, 'exited');
-
+  const [{ status }, toggle] = useTransition({
+    timeout: animationTimeout,
+  });
   useEffect(() => {
-    dispatch(open ? 'open' : 'close');
-    const timeout = setTimeout(() => {
-      dispatch('finish');
-    }, 120);
-
-    return () => {
-      clearTimeout(timeout);
-    };
+    toggle(open);
   }, [open]);
-
   return (
-    <Dialog.Root
-      modal
-      open={animationState !== 'exited'}
-      onOpenChange={onOpenChange}
-    >
+    <Dialog.Root modal open={status !== 'exited'} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <Dialog.Overlay className={styles.modalOverlay} />
         <div className={styles.modalContentWrapper}>
           <Dialog.Content
+            style={assignInlineVars({
+              [styles.animationTimeout]: `${animationTimeout}ms`,
+            })}
             className={styles.modalContent}
-            data-state={animationState}
+            data-state={status}
           >
             {children}
           </Dialog.Content>
diff --git a/yarn.lock b/yarn.lock
index 65178ffb1..eac8622ce 100644
--- a/yarn.lock
+++ b/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"