fix issue [5089](ant-design#5089)

xieguanglei · Mar 23, 2017 · 69b3065 · 69b3065
1 parent 9a0b9ad
commit 69b3065
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
@@ -33,7 +33,7 @@ Ant Design has 3 types Tabs for different situation.
 | 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 |
+| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom`. An {inkBar:boolean, tabPane:boolean} object is also allowed | boolean | true |
 
 ### Tabs.TabPane
 | Property     | Description           | Type     | Default      |

diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
@@ -28,7 +28,7 @@ export interface TabsProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
-  animated?: boolean;
+  animated?: boolean | { inkBar: boolean; tabPane: boolean; };
 }
 
 // Tabs
@@ -100,6 +100,13 @@ export default class Tabs extends React.Component<TabsProps, any> {
       onNextClick,
       animated,
     } = this.props;
+
+    let {inkBarAnimated, tabPaneAnimated} = typeof animated === 'object' ? {
+      inkBarAnimated: animated.inkBar, tabPaneAnimated: animated.tabPane,
+    } : {
+      inkBarAnimated: animated, tabPaneAnimated: animated,
+    };
+
     warning(
       !(type.indexOf('card') >= 0 && size === 'small'),
       'Tabs[type=card|editable-card] doesn\'t have small size, it\'s by designed.'
@@ -153,6 +160,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
 
     const renderTabBar = () => (
       <ScrollableInkTabBar
+        inkBarAnimated={inkBarAnimated}
         extraContent={tabBarExtraContent}
         onTabClick={onTabClick}
         onPrevClick={onPrevClick}
@@ -167,7 +175,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
         className={cls}
         tabBarPosition={tabPosition}
         renderTabBar={renderTabBar}
-        renderTabContent={() => <TabContent animated={animated} animatedWithMargin />}
+        renderTabContent={() => <TabContent animated={tabPaneAnimated} animatedWithMargin />}
         onChange={this.handleChange}
       >
         {childrenWithClose || children}

diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
@@ -36,7 +36,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | 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 |
+| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效，，也可传入 {inkBar:boolean, tabPane:boolean} 分别控制 | boolean | true |
 
 ### Tabs.TabPane
 

diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
@@ -18,8 +18,10 @@
     box-sizing: border-box;
     height: 2px;
     background-color: @primary-color;
-    transition: transform 0.3s @ease-in-out;
     transform-origin: 0 0;
+    &-animated {
+      transition: transform 0.3s @ease-in-out;
+    }
   }
 
   &-bar {