fix: tabpane show animation on first render

packages/semi-ui/tabs/TabPane.tsx

@@ -28,12 +28,19 @@ class TabPane extends PureComponent<TabPaneProps> {
     ref = createRef<HTMLDivElement>();
     _active: boolean;
     context: TabContextValue;
-    firstRender: boolean = true;
+    rendered: boolean = true;
 
     componentDidMount(): void {
         this.lastActiveKey = this.context.activeKey;
     }
 
+    componentDidUpdate(prevProps: Readonly<TabPaneProps>, prevState: any, snapshot?: any) {
+        // CATION: be careful of the tabPane state update
+        // Animation only play while it is not first rendering process.
+        // Update states multiple times in TabPane will cause children unwanted re-rendering and unwanted animation.
+        this.rendered = false; 
+    }
+
     // get direction from current item key to activeKey
     getDirection = (activeKey: string, itemKey: string, panes: Array<PlainTab>): boolean => {
         if (itemKey !== null && activeKey !== null && Array.isArray(panes) && panes.length) {
@@ -63,7 +70,7 @@ class TabPane extends PureComponent<TabPaneProps> {
     };
 
     render(): ReactNode {
-        const { tabPaneMotion: motion, tabPosition, isFirstRender } = this.context;
+        const { tabPaneMotion: motion, tabPosition } = this.context;
         const { className, style, children, itemKey, ...restProps } = this.props;
         const active = this.context.activeKey === itemKey;
         const classNames = cls(className, {
@@ -102,7 +109,7 @@ class TabPane extends PureComponent<TabPaneProps> {
                 x-semi-prop="children"
             >
 
-                <CSSAnimation motion={motion && active && !isFirstRender} animationState={active ? "enter" : "leave"}
+                <CSSAnimation motion={motion && active && !this.rendered} animationState={active ? "enter" : "leave"}
                     startClassName={startClassName}>
                     {
                         ({ animationClassName, animationEventsNeedBind }) => {

packages/semi-ui/tabs/index.tsx

@@ -22,7 +22,6 @@ export * from './interface';
 export interface TabsState {
     activeKey: string;
     panes: Array<PlainTab>;
-    isFirstRender: boolean;
 }
 
 class Tabs extends BaseComponent<TabsProps, TabsState> {
@@ -78,7 +77,6 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         this.state = {
             activeKey: this.foundation.getDefaultActiveKey(),
             panes: [],
-            isFirstRender:true
         };
         this.contentRef = createRef();
         this.contentHeight = 'auto';
@@ -163,12 +161,6 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         return states;
     }
 
-    componentDidMount() {
-        super.componentDidMount();
-        this.setState({
-            isFirstRender: false,
-        })
-    }
 
     componentDidUpdate(prevProps: TabsProps): void {
         // Panes state acts on tab bar, no need to compare TabPane children
@@ -293,7 +285,6 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
                         panes,
                         tabPaneMotion,
                         tabPosition,
-                        isFirstRender:this.state.isFirstRender
                     }}
                 >
                     <div

packages/semi-ui/tabs/interface.ts

@@ -84,5 +84,4 @@ export interface TabContextValue {
     panes?: Array<PlainTab>;
     tabPaneMotion?: boolean;
     tabPosition?: TabPosition;
-    isFirstRender: boolean;
 }