diff --git a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx
index ce790e6b58..66ce0ee6d2 100644
--- a/frontend/appflowy_web_app/src/components/publish/PublishView.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/PublishView.tsx
@@ -80,7 +80,7 @@ export function PublishView({ namespace, publishName }: PublishViewProps) {
             height: 'calc(100vh - 64px)',
             transform: open ? `translateX(${drawerWidth}px)` : 'none',
             width: open ? `calc(100% - ${drawerWidth}px)` : '100%',
-            transition: 'width 0.2s ease-in-out 0s',
+            transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out',
           }}
           className={'appflowy-layout appflowy-scroll-container'}
         >
diff --git a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
index 40933eda75..f0850439c4 100644
--- a/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/header/PublishViewHeader.tsx
@@ -63,7 +63,7 @@ export function PublishViewHeader({
       style={{
         transform: openDrawer ? `translateX(${drawerWidth}px)` : 'none',
         width: openDrawer ? `calc(100% - ${drawerWidth}px)` : '100%',
-        transition: 'width 0.2s ease-in-out 0s',
+        transition: 'width 0.2s ease-in-out, transform 0.2s ease-in-out',
       }}
       className={'appflowy-top-bar flex h-[48px] px-5'}
     >