fix: css animation trigger animation start and end on mount

packages/semi-ui/_cssAnimation/index.tsx

@@ -1,5 +1,5 @@
-import React, {CSSProperties, ReactNode} from 'react';
-import {isEqual, noop} from "lodash";
+import React, { CSSProperties, ReactNode } from 'react';
+import { isEqual, noop } from "lodash";
 
 
 interface AnimationEventsNeedBind {
@@ -50,6 +50,14 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
     }
 
 
+    componentDidMount() {
+        this.props.onAnimationStart?.();
+        if (!this.props.motion){
+            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")) {
@@ -103,7 +111,7 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
                 animationStyle: {},
                 animationEventsNeedBind: {},
                 isAnimating: this.state.isAnimating
-            })
+            });
         }
     }
 }