From 727c7428890bf855634973bbe386b4d71521ef96 Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Wed, 3 Aug 2022 11:14:52 +0800
Subject: [PATCH] feat: modify the type of animation that appears for the
 pendant Add button

---
 .../src/block-pendant/pendant-render/PandentRender.tsx     | 7 +++----
 libs/components/ui/src/mui.ts                              | 6 ++++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
index 8b6c9bb53f..76ed0d4e32 100644
--- a/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
+++ b/libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
@@ -1,5 +1,5 @@
 import {
-    MuiZoom,
+    MuiFade,
     Popover,
     PopperHandler,
     styled,
@@ -100,16 +100,15 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
                 );
             })}
             {hasAddBtn ? (
-                <MuiZoom in={showAddBtn}>
+                <MuiFade in={showAddBtn}>
                     <div>
                         <AddPendantPopover
                             block={block}
                             iconStyle={{ marginTop: 4 }}
                             container={blockRenderContainerRef.current}
-                            trigger="click"
                         />
                     </div>
-                </MuiZoom>
+                </MuiFade>
             ) : null}
         </BlockPendantContainer>
     );
diff --git a/libs/components/ui/src/mui.ts b/libs/components/ui/src/mui.ts
index 94025c5f5b..b0658ad526 100644
--- a/libs/components/ui/src/mui.ts
+++ b/libs/components/ui/src/mui.ts
@@ -51,6 +51,7 @@ import {
     tooltipClasses,
     Typography,
     Zoom,
+    Fade,
 } from '@mui/material';
 
 export { alpha } from '@mui/system';
@@ -233,6 +234,11 @@ export const MuiInput = Input;
  */
 export const MuiZoom = Zoom;
 
+/**
+ * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
+ */
+export const MuiFade = Fade;
+
 /**
  * @deprecated It is not recommended to use Mui directly, because the design will not refer to Mui's interaction logic.
  */