fix(dialog): dialog 存在闪烁问题 (#2435)

Tencent · Aug 15, 2023 · 553e4a2 · 553e4a2
1 parent 9fad873
commit 553e4a2
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
@@ -29,7 +29,7 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
   const wrapRef = useRef<HTMLDivElement>();
   const maskRef = useRef<HTMLDivElement>();
   const contentClickRef = useRef(false);
-  const dialogCardRef = useRef();
+  const dialogCardRef = useRef<HTMLDivElement>();
   const dialogPosition = useRef();
   const portalRef = useRef();
   const [state, setState] = useSetState<DialogProps>({ isPlugin: false, ...props });
@@ -149,6 +149,16 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
     wrapRef.current.style.display = 'block';
   };
 
+  const onInnerAnimateStart = () => {
+    if (!dialogCardRef.current) return;
+    dialogCardRef.current.style.display = 'block';
+  };
+
+  const onInnerAnimateLeave = () => {
+    if (!dialogCardRef.current) return;
+    dialogCardRef.current.style.display = 'none';
+  };
+
   const renderMask = () => {
     if (mode !== 'modal') return null;
 
@@ -207,6 +217,8 @@ const Dialog = forwardRef<DialogInstance, DialogProps>((originalProps, ref) => {
                 timeout={300}
                 classNames={`${componentCls}-zoom`}
                 nodeRef={dialogCardRef}
+                onEnter={onInnerAnimateStart}
+                onExited={onInnerAnimateLeave}
               >
                 <DialogCard
                   ref={dialogCardRef}