fix: fix modal afterClose no use after css animation

packages/semi-foundation/modal/modalFoundation.ts

@@ -1,4 +1,3 @@
-import { get } from 'lodash-es';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Motion } from '../utils/type';
 
@@ -11,7 +10,7 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     notifyCancel: (e: any) => void;
     notifyOk: (e: any) => void;
     notifyClose: () => void;
-    toggleHidden: (hidden: boolean) => void;
+    toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
     getProps: () => ModalProps;
 }
@@ -95,8 +94,8 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     }
 
 
-    toggleHidden = (hidden: boolean) => {
-        this._adapter.toggleHidden(hidden);
+    toggleHidden = (hidden: boolean,callback?:(hidden:boolean)=>void) => {
+        this._adapter.toggleHidden(hidden,callback);
     };
 
     // // eslint-disable-next-line max-len

packages/semi-ui/modal/Modal.tsx

@@ -157,9 +157,9 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             notifyClose: () => {
                 this.props.afterClose();
             },
-            toggleHidden: (hidden: boolean) => {
+            toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => {
                 if (hidden !== this.state.hidden) {
-                    this.setState({ hidden });
+                    this.setState({ hidden }, callback || noop);
                 }
             },
             notifyFullScreen: (isFullScreen: boolean) => {
@@ -173,17 +173,11 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
     static getDerivedStateFromProps(props: ModalReactProps, prevState: ModalState) {
         const newState: Partial<ModalState> = {};
 
-        if (props.visible && prevState.hidden) {
-            newState.hidden = false;
-        }
         if (props.fullScreen !== prevState.isFullScreen) {
             newState.isFullScreen = props.fullScreen;
         }
 
-        // if not using animation, need to update hidden state from props
-        if (!props.visible && !props.motion && !prevState.hidden) {
-            newState.hidden = true;
-        }
+
         return newState;
     }
 
@@ -244,6 +238,10 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         if (prevProps.visible && !this.props.visible) {
             this.foundation.afterHide();
         }
+
+        if(!this.props.motion){
+            this.updateHiddenState();
+        }
     }
 
     componentWillUnmount() {
@@ -260,6 +258,16 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         this.foundation.handleOk(e);
     };
 
+    updateHiddenState=()=>{
+        const {visible}=this.props;
+        const {hidden}=this.state;
+        if (!visible && !hidden) {
+            this.foundation.toggleHidden(true, () => this.foundation.afterClose());
+        } else if (visible && this.state.hidden) {
+            this.foundation.toggleHidden(false)
+        }
+    }
+
     renderFooter = (): ReactNode => {
         const {
             okText,
@@ -351,7 +359,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         }
 
         const classList = cls(className, {
-            [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.hidden,
+            [`${cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.hidden && !visible,
         });
         const contentClassName = motion ? cls({
             [`${cssClasses.DIALOG}-content-animate-hide`]: !visible,
@@ -362,18 +370,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             [`${cssClasses.DIALOG}-mask-animate-show`]: visible
         }) : null;
 
-        const updateHiddenState=()=>{
-            if (!visible && !this.state.hidden) {
-                this.foundation.toggleHidden(true)
-            } else if (visible && this.state.hidden) {
-                this.foundation.toggleHidden(false)
-            }
-        };
-
-        if(!motion){
-            updateHiddenState()
-        }
-
         return (
             <Portal style={wrapperStyle} getPopupContainer={getPopupContainer}>
                 <ModalContent
@@ -387,7 +383,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                     style={style}
                     ref={this.modalRef}
                     onAnimationEnd={() => {
-                        updateHiddenState();
+                        this.updateHiddenState();
                     }}
                     footer={renderFooter}
                     onClose={this.handleCancel}