chore

packages/semi-foundation/modal/modalFoundation.ts

@@ -35,7 +35,7 @@ export interface ModalProps {
     maskClosable?: boolean;
     maskStyle?: Record<string, any>;
     maskFixed?: boolean;
-    motion?: Motion;
+    motion?: boolean;
     okButtonProps?: any;
     okText?: string;
     okType?: OKType;

packages/semi-ui/_cssAnimation/index.tsx

@@ -3,8 +3,8 @@ import { isEqual, noop } from "lodash";
 
 
 interface AnimationEventsNeedBind {
-    onAnimationStart: (e: React.AnimationEvent) => void
-    onAnimationEnd: (e: React.AnimationEvent) => void
+    onAnimationStart?: (e: React.AnimationEvent) => void
+    onAnimationEnd?: (e: React.AnimationEvent) => void
 
     [key: string]: (e: any) => void;
 }
@@ -30,6 +30,11 @@ interface AnimationState {
 
 
 class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
+
+    static defaultProps = {
+        motion:true,
+    }
+
     constructor(props) {
         super(props);
         
@@ -39,6 +44,13 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
         };
     }
 
+    componentDidMount(): void {
+        if(!this.props.motion){
+            this.props.onAnimationStart?.();
+            this.props.onAnimationEnd?.();
+        }
+    }
+
     componentDidUpdate(prevProps: Readonly<AnimationProps>, prevState: Readonly<AnimationState>, snapshot?: any) {
         const changedKeys = Object.keys(this.props).filter(key => !isEqual(this.props[key], prevProps[key]));
         if (changedKeys.includes("animationState")) {
@@ -49,6 +61,7 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
                 extraStyle: {}
             }, this.props.onAnimationStart ?? noop);
         }
+    
 
     }
 
@@ -68,36 +81,44 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
 
 
     render() {
-        return this.props.children({
+        if(this.props.motion){
+           return this.props.children({
             animationClassName: this.state.currentClassName ?? "",
             animationStyle: this.state.extraStyle,
             animationEventsNeedBind: {
                 onAnimationStart: this.handleAnimationStart,
                 onAnimationEnd: this.handleAnimationEnd
             }
-        });
+        }); 
+        }else{
+            return this.props.children({
+                animationClassName: "",
+                animationStyle: {},
+                animationEventsNeedBind: {}
+        })
+      }
     }
 }
 
 
-const mergeAnimationFunction = (eventHandleFunctions: AnimationEventsNeedBind[]) => {
-    //merge function in objects
-    const mergedFunction = {};
-    eventHandleFunctions.forEach(eventHandleFunction => {
-        Object.keys(eventHandleFunction).forEach(key => {
-            if (mergedFunction[key]) {
-                const oldFunction = mergedFunction[key];
-                mergedFunction[key] = (e) => {
-                    eventHandleFunction[key](e);
-                    oldFunction(e);
-                };
-            } else {
-                mergedFunction[key] = eventHandleFunction[key];
-            }
-        });
-    });
-    return mergedFunction;
-};
-
-export { mergeAnimationFunction };
+// const mergeAnimationFunction = (eventHandleFunctions: AnimationEventsNeedBind[]) => {
+//     //merge function in objects
+//     const mergedFunction = {};
+//     eventHandleFunctions.forEach(eventHandleFunction => {
+//         Object.keys(eventHandleFunction).forEach(key => {
+//             if (mergedFunction[key]) {
+//                 const oldFunction = mergedFunction[key];
+//                 mergedFunction[key] = (e) => {
+//                     eventHandleFunction[key](e);
+//                     oldFunction(e);
+//                 };
+//             } else {
+//                 mergedFunction[key] = eventHandleFunction[key];
+//             }
+//         });
+//     });
+//     return mergedFunction;
+// };
+
+// export { mergeAnimationFunction };
 export default CSSAnimation;

packages/semi-ui/modal/Modal.tsx

@@ -159,7 +159,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                 this.props.onOk(e);
             },
             notifyClose: () => {
-                (this.props.motion as MotionObject)?.didLeave?.();
                 this.props.afterClose();
             },
             toggleHidden: (hidden: boolean, callback?: (hidden: boolean) => void) => {
@@ -244,7 +243,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         this.originBodyWith = document.body.style.width;
         if (this.props.visible) {
             this.foundation.beforeShow();
-            this._active = this._active || this.props.visible;
         }
     }
 
@@ -263,10 +261,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         if (shouldRender === true && this.state.shouldRender === false) {
             this.foundation.setShouldRender(true);
         }
-
-        if (!this.props.motion) {
-            this.updateState();
-        }
     }
 
     componentWillUnmount() {
@@ -391,22 +385,6 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
             [`${cssClasses.DIALOG}-mask-animate-show`]: visible
         }) : null;
 
-        if (!motion && this.state.shouldRender){
-            this._haveRendered = true;
-            return <ModalContent
-                {...restProps}
-                isFullScreen={this.state.isFullScreen}
-                maskClassName={maskClassName}
-                className={classList}
-                getPopupContainer={getPopupContainer}
-                maskStyle={maskStyle}
-                style={style}
-                ref={this.modalRef}
-                footer={renderFooter}
-                onClose={this.handleCancel}
-
-            />;
-        }
         if (this.state.shouldRender){
             this._haveRendered = true;
         }
@@ -420,7 +398,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
                 >
                     {
                         ({ animationClassName, animationEventsNeedBind })=>{
-                            return <CSSAnimation animationState={visible?'enter':'leave'}
+                            return <CSSAnimation motion={this.props.motion} animationState={visible?'enter':'leave'}
                                 startClassName={visible?`${cssClasses.DIALOG}-mask-animate-show`:`${cssClasses.DIALOG}-mask-animate-hide`}
                                 onAnimationEnd={()=>{
                                     this.updateState();