From a1a6bacb3c290d9d18d6cb007288c0a44dfe14e0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 26 Nov 2018 20:58:30 +0800
Subject: [PATCH] [improvement] Tab: optimize transition (#2151)

---
 packages/tab/en-US.md                             | 2 +-
 packages/tab/index.vue                            | 2 +-
 packages/tab/test/__snapshots__/demo.spec.js.snap | 2 +-
 packages/tab/zh-CN.md                             | 2 +-
 packages/tabs/index.less                          | 3 ++-
 packages/tabs/index.vue                           | 6 +++---
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/tab/en-US.md b/packages/tab/en-US.md
index cbd501089..b002a007e 100644
--- a/packages/tab/en-US.md
+++ b/packages/tab/en-US.md
@@ -153,7 +153,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | v-model | Index of active tab | `String` `Number` | `0` |
 | color | Tab color | `String` | `#f44` |
 | type | Can be set to `line` `card` | `String` | `line` |
-| duration | Toggle tab's animation time | `Number` | `0.4` | - |
+| duration | Toggle tab's animation time | `Number` | `0.3` | - |
 | line-width | Width of tab line (px) | `Number` | Width of active tab |
 | swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - |
 | sticky | Whether to use sticky mode | `Boolean` | `false` |
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 01dfa1a3c..fe468f9a2 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    :class="b('pane', { float: parent.animated })"
     v-show="parent.animated || isSelected"
+    :class="b('pane', { float: parent.animated })"
     :style="paneStyle"
   >
     <slot v-if="inited" />
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index fb8533cb9..c37b75a3d 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -219,7 +219,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="width:0px;transition-duration:0.4s;transform:translateX(0px);display:none;">
+        <div class="van-tabs__track" style="width:0px;transition-duration:0.3s;transform:translateX(0px);display:none;">
           <div class="van-tab__pane van-tab__pane--float">
             <!---->
             <!---->
diff --git a/packages/tab/zh-CN.md b/packages/tab/zh-CN.md
index f32e0b2f1..eeb59b8f7 100644
--- a/packages/tab/zh-CN.md
+++ b/packages/tab/zh-CN.md
@@ -157,7 +157,7 @@ export default {
 | v-model | 当前标签的索引 | `String` `Number` | `0` | 1.0.6 |
 | color | 标签颜色 | `String` | `#f44` | 1.2.0 |
 | type | 样式类型，可选值为`card` | `String` | `line` | - |
-| duration | 动画时间，单位秒 | `Number` | `0.4` | - |
+| duration | 动画时间，单位秒 | `Number` | `0.3` | - |
 | line-width | 底部条宽度，单位 px | `Number` | - | 1.1.1 |
 | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | 1.0.0 |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index 4d181e4ca..b8f88de84 100644
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@@ -3,6 +3,7 @@
 .van-tab {
   flex: 1;
   cursor: pointer;
+  min-width: 0; // hack for flex ellipsis
   padding: 0 5px;
   font-size: 14px;
   position: relative;
@@ -11,7 +12,7 @@
   text-align: center;
   box-sizing: border-box;
   background-color: @white;
-  min-width: 0; /* hack for flex ellipsis */
+  transition: color .3s;
 
   span {
     display: block;
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 4187aad71..fa8ae5a89 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -72,6 +72,7 @@ export default create({
   props: {
     color: String,
     sticky: Boolean,
+    animated: Boolean,
     lineWidth: Number,
     swipeable: Boolean,
     active: {
@@ -84,7 +85,7 @@ export default create({
     },
     duration: {
       type: Number,
-      default: 0.4
+      default: 0.3
     },
     swipeThreshold: {
       type: Number,
@@ -93,8 +94,7 @@ export default create({
     offsetTop: {
       type: Number,
       default: 0
-    },
-    animated: Boolean
+    }
   },
 
   data() {