[Improvement] Tab animation fluency && position (#379)

packages/vant-css/src/tab.css

@@ -4,46 +4,38 @@
 .van-tabs {
   position: relative;
 
-  &__nav-wrap {
-    overflow: hidden;
-  }
-
   &__swipe {
     user-select: none;
-    transition: transform linear .2s;
 
     .van-tab {
       flex: 0 0 22%;
     }
 
     .van-tabs__nav {
-      overflow: visible;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+
+      &::-webkit-scrollbar {
+        display: none;
+        background-color: transparent;
+      }
     }
   }
 
   &__nav {
-    overflow: hidden;
-    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
-    position: relative;
     display: flex;
+    position: relative;
+    background-color: $white;
 
     &--line {
       height: 44px;
-
-      .van-tab {
-        &::after {
-          border-width: 1px 0;
-        }
-      }
     }
 
     &--card {
       height: 28px;
       margin: 0 15px;
-      background-color: $white;
       border-radius: 2px;
       border: 1px solid $gray-darker;
-      overflow: hidden;
 
       .van-tab {
         color: $gray-darker;
@@ -55,8 +47,8 @@
         }
 
         &.van-tab--active {
-          background-color: $gray-darker;
           color: $white;
+          background-color: $gray-darker;
         }
       }
     }
@@ -64,27 +56,25 @@
 
   &__nav-bar {
     z-index: 1;
-    position: absolute;
     left: 0;
     bottom: 0;
     height: 2px;
-    background-color: #f13e3a;
-    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
-    transform-origin: 0 0;
+    position: absolute;
+    background-color: $red;
   }
 }
 
 .van-tab {
+  flex: 1;
+  cursor: pointer;
+  padding: 0 5px;
+  font-size: 14px;
   position: relative;
   color: $text-color;
-  background-color: $white;
-  font-size: 14px;
   line-height: 44px;
-  box-sizing: border-box;
-  cursor: pointer;
   text-align: center;
-  flex: 1;
-  padding: 0 5px;
+  box-sizing: border-box;
+  background-color: $white;
   min-width: 0; /* hack for flex ellipsis */
 
   span {
@@ -92,10 +82,22 @@
     @mixin ellipsis;
   }
 
+  &:active {
+    background-color: $active-color;
+  }
+
   &--active {
     color: $red;
   }
 
+  &--disabled {
+    color: $gray;
+
+    &:active {
+      background-color: $white;
+    }
+  }
+
   &__pane {
     display: none;