fix(core): peek view animation (#8858)

packages/frontend/core/src/modules/peek-view/entities/peek-view.ts

@@ -220,10 +220,10 @@ export type PeekViewMode = 'full' | 'fit' | 'max';
 export class PeekViewEntity extends Entity {
   private readonly _active$ = new LiveData<ActivePeekView | null>(null);
   private readonly _show$ = new LiveData<{
-    animation: PeekViewAnimation;
+    animation: boolean;
     value: boolean;
   }>({
-    animation: 'zoom',
+    animation: true,
     value: false,
   });
 
@@ -258,7 +258,7 @@ export class PeekViewEntity extends Entity {
     this._active$.next({ target, info: resolvedInfo });
     this._show$.next({
       value: true,
-      animation: target.element ? 'zoom' : 'fade',
+      animation: true,
     });
 
     if (abortSignal) {
@@ -281,10 +281,10 @@ export class PeekViewEntity extends Entity {
     return firstValueFrom(race(this._active$, this.show$).pipe(map(() => {})));
   };
 
-  close = (animation?: PeekViewAnimation) => {
+  close = (animation = true) => {
     this._show$.next({
       value: false,
-      animation: animation ?? this._show$.value.animation,
+      animation,
     });
   };
 }

packages/frontend/core/src/modules/peek-view/view/modal-container.tsx

@@ -117,20 +117,8 @@ export const PeekViewModalContainer = forwardRef<
         contentWrapper?: AnimeParams;
       }
     ) => {
-      return new Promise<void>(resolve => {
+      // if target has no bounding client rect,
-        const contentClip = contentClipRef.current;
+      // find its parent that has bounding client rect
-        const content = contentRef.current;
-        const overlay = overlayRef.current;
-
-        if (!contentClip || !content || !target || !overlay) {
-          resolve();
-          setAnimeState('idle');
-          return;
-        }
-        const targets = contentClip;
-        const lockSizeEl = content;
-
-        // if target has no bounding client rect, find its parent that has bounding client rect
       let iteration = 0;
       while (
         target &&
@@ -143,9 +131,22 @@ export const PeekViewModalContainer = forwardRef<
       }
 
       if (!target) {
+        // fallback to fade animation
+        return animateFade(!!zoomIn);
+      }
+
+      return new Promise<void>(resolve => {
+        const contentClip = contentClipRef.current;
+        const content = contentRef.current;
+        const overlay = overlayRef.current;
+
+        if (!contentClip || !content || !target || !overlay) {
           resolve();
+          setAnimeState('idle');
           return;
         }
+        const targets = contentClip;
+        const lockSizeEl = content;
 
         const from = zoomIn ? target : contentClip;
         const to = zoomIn ? contentClip : target;

packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx

@@ -113,7 +113,7 @@ export const DocPeekViewControls = ({
         nameKey: 'open',
         onClick: () => {
           workbench.openDoc(docRef);
-          peekView.close('none');
+          peekView.close(false);
         },
       },
       {
@@ -122,7 +122,7 @@ export const DocPeekViewControls = ({
         name: t['com.affine.peek-view-controls.open-doc-in-new-tab'](),
         onClick: () => {
           workbench.openDoc(docRef, { at: 'new-tab' });
-          peekView.close('none');
+          peekView.close(false);
         },
       },
       BUILD_CONFIG.isElectron && {
@@ -131,7 +131,7 @@ export const DocPeekViewControls = ({
         name: t['com.affine.peek-view-controls.open-doc-in-split-view'](),
         onClick: () => {
           workbench.openDoc(docRef, { at: 'beside' });
-          peekView.close('none');
+          peekView.close(false);
         },
       },
       {
@@ -178,7 +178,7 @@ export const AttachmentPeekViewControls = ({
           if (docId && blockId) {
             workbench.openAttachment(docId, blockId);
           }
-          peekView.close('none');
+          peekView.close(false);
         },
       },
       {
@@ -190,7 +190,7 @@ export const AttachmentPeekViewControls = ({
           if (docId && blockId) {
             workbench.openAttachment(docId, blockId, { at: 'new-tab' });
           }
-          peekView.close('none');
+          peekView.close(false);
         },
       },
       BUILD_CONFIG.isElectron && {
@@ -204,7 +204,7 @@ export const AttachmentPeekViewControls = ({
           if (docId && blockId) {
             workbench.openAttachment(docId, blockId, { at: 'beside' });
           }
-          peekView.close('none');
+          peekView.close(false);
         },
       },
     ].filter((opt): opt is ControlButtonProps => Boolean(opt));

packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx

@@ -93,6 +93,10 @@ const getRendererProps = (
         ? activePeekView.target.element
         : undefined,
     mode: getMode(activePeekView.info),
+    animation:
+      activePeekView.target.element && getMode(activePeekView.info) !== 'full'
+        ? 'zoom'
+        : 'fade',
     dialogFrame: activePeekView.info.type !== 'image',
   };
 };
@@ -124,8 +128,8 @@ export const PeekViewManagerModal = () => {
   return (
     <PeekViewModalContainer
       {...renderProps}
+      animation={show?.animation ? renderProps?.animation : 'none'}
       open={!!show?.value && !!renderProps}
-      animation={show?.animation || 'none'}
       onOpenChange={open => {
         if (!open) {
           peekViewEntity.close();