[improvement] Tab: optimize transition (#2151)

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` |

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" />

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">
             <!---->
             <!---->

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` | - |

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;

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() {