feat: supports Tabs[animated], close: #3324 (#3326)

components/tabs/index.en-US.md

@@ -22,19 +22,20 @@ Ant Design has 3 types Tabs for different situation.
 
 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| activeKey    | Current TabPane's key| String   | _             |
+| activeKey    | Current TabPane's key| string   | _             |
 | defaultActiveKey | Default actived tabPanel's key, if activeKey is not setted. | - |
 | onChange     | Callback when tab is switched | Function | - |
 | onTabClick   | Callback when tab is clicked | Function | - |
-| tabBarExtraContent | Extra element in tab bar | React Node | - |
-| type         | Basic style of tabs. Options: line, card & editable-card | String | line |
-| size         | Tab bar size. Options: default, small | String | default |
-| tabPosition  | Position of tabs. Options: top, right, bottom & left | String | top |
-| onEdit       | Callback when tab is added or removed, which is executing when set type as editable-card | Function(targetKey, action) | - |
-| hideAdd      | Hide plus icon or not, which is effective when set type as editable-card | Boolean | false |
+| tabBarExtraContent | Extra element in tab bar | React.ReactNode | - |
+| type         | Basic style of tabs. Options: line, card & editable-card | string | line |
+| size         | Tab bar size. Options: default, small | string | default |
+| tabPosition  | Position of tabs. Options: top, right, bottom & left | string | top |
+| onEdit       | Callback when tab is added or removed, which is executing when set type as editable-card | (targetKey, action): void | - |
+| hideAdd      | Hide plus icon or not, which is effective when set type as editable-card | boolean | false |
+| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean | true |
 
 ### Tabs.TabPane
 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| key          | TabPane's key         | String   | _            |
-| tab          | Show text in TabPane's head | React.Element or String | _ |
+| key          | TabPane's key         | string   | _            |
+| tab          | Show text in TabPane's head | React.ReactNode | _ |

components/tabs/index.tsx

@@ -23,7 +23,7 @@ export interface TabsProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
-  animation?: string;
+  animated?: boolean;
 }
 
 // Tabs
@@ -38,11 +38,11 @@ export default class Tabs extends React.Component<TabsProps, any> {
 
   static defaultProps = {
     prefixCls: 'ant-tabs',
-    animation: 'slide-horizontal',
     type: 'line', // or 'card' 'editable-card'
     onChange() { },
     onEdit() { },
     hideAdd: false,
+    animated: true,
   };
 
   createNewTab = (targetKey) => {
@@ -67,11 +67,11 @@ export default class Tabs extends React.Component<TabsProps, any> {
       size,
       type,
       tabPosition,
-      animation,
       children,
       tabBarExtraContent,
       hideAdd,
       onTabClick,
+      animated,
     } = this.props;
     let className = classNames({
       [this.props.className]: !!this.props.className,
@@ -79,10 +79,8 @@ export default class Tabs extends React.Component<TabsProps, any> {
       [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
       [`${prefixCls}-card`]: type.indexOf('card') >= 0,
       [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-no-animation`]: !animated,
     });
-    if (tabPosition === 'left' || tabPosition === 'right' || type.indexOf('card') >= 0) {
-      animation = null;
-    }
     // only card type tabs can be added and closed
     let childrenWithClose;
     if (type === 'editable-card') {
@@ -125,7 +123,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
             onTabClick={onTabClick}
           />
         )}
-        renderTabContent={() => <TabContent />}
+        renderTabContent={() => <TabContent animated={animated} />}
         onChange={this.handleChange}
       >
         {childrenWithClose || children}

components/tabs/index.zh-CN.md

@@ -23,20 +23,21 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 | 参数             | 说明                                         | 类型     | 默认值        |
 |------------------|----------------------------------------------|----------|---------------|
-| activeKey        | 当前激活 tab 面板的 key                      | String   | 无            |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String   | 第一个面板    |
+| activeKey        | 当前激活 tab 面板的 key                      | string   | 无            |
+| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string   | 第一个面板    |
 | onChange         | 切换面板的回调                               | Function | 无            |
 | onTabClick       | tab 被点击的回调                             | Function | 无            |
-| tabBarExtraContent | tab bar 上额外的元素                       | React Node | 无          |
-| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型   | String   | 'line'      |
-| size | 大小，提供 `default` 和 `small` 两种大小  | String   | 'default'      |
-| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left`  | String   | 'top'      |
-| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | Function(targetKey, action) | 无 |
-| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | Boolean   | false    |
+| tabBarExtraContent | tab bar 上额外的元素                       | React.ReactNode | 无          |
+| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型   | string   | 'line'      |
+| size | 大小，提供 `default` 和 `small` 两种大小  | string   | 'default'      |
+| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left`  | string   | 'top'      |
+| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
+| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean   | false    |
+| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean | true |
 
 ### Tabs.TabPane
 
 | 参数 | 说明             | 类型                    | 默认值 |
 |------|------------------|-------------------------|--------|
-| key  | 对应 activeKey   | String                  | 无     |
-| tab  | 选项卡头显示文字 | React.Element or String | 无     |
+| key  | 对应 activeKey   | string                  | 无     |
+| tab  | 选项卡头显示文字 | React.ReactNode | 无     |

components/tabs/style/index.less

@@ -381,6 +381,7 @@
 }
 
 .no-flex,
+.@{tab-prefix-cls}-no-animation,
 .@{tab-prefix-cls}-vertical {
   .@{tab-prefix-cls}-content {
     &-animated {