[bugfix] Tabs：修复开启animated属性时导致的滚动问题 (#2238)

packages/tabs/index.less

@@ -122,6 +122,14 @@
     overflow: hidden;
   }
 
+  &__track {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    will-change: left;
+  }
+
   &--line {
     padding-top: @tabs-line-height;
 
@@ -139,10 +147,18 @@
   }
 
   .van-tab__pane {
+    width: 100%;
     box-sizing: border-box;
-  
-    &--float {
-      float: left;
+    flex-shrink: 0;
+    overflow-y: auto;
+
+    &--inactive {
+      height: 0;
+      overflow: visible;
+    }
+
+    &--active {
+      height: auto;
     }
   }
 }

packages/tabs/index.vue

@@ -44,7 +44,6 @@
       :class="b('content')"
     >
       <div
-        v-show="computedWidth !== 0"
         :class="b('track')"
         :style="trackStyle"
       >
@@ -112,8 +111,7 @@ export default create({
         resize: false,
         sticky: false,
         swipeable: false
-      },
-      computedWidth: 0
+      }
     };
   },
 
@@ -149,18 +147,18 @@ export default create({
     trackStyle() {
       const {
         curActive,
-        computedWidth = 0,
-        tabs,
         animated
       } = this;
-      if (!animated) return {};
 
-      const offset = -1 * computedWidth * curActive;
-      return {
-        width: `${computedWidth * tabs.length}px`,
-        transitionDuration: `${this.duration}s`,
-        transform: `translateX(${offset}px)`
+      const trackStyle = {
+        left: `${-1 * curActive * 100}%`
       };
+
+      if (animated) {
+        trackStyle.transitionDuration = `${this.duration}s`;
+      }
+
+      return trackStyle;
     }
   },
 
@@ -203,7 +201,6 @@ export default create({
   mounted() {
     this.correctActive(this.active);
     this.setLine();
-    this.setWidth();
 
     this.$nextTick(() => {
       this.handlers(true);
@@ -227,13 +224,6 @@ export default create({
   },
 
   methods: {
-    setWidth() {
-      if (this.$el) {
-        const rect = this.$el.getBoundingClientRect() || {};
-        this.computedWidth = rect.width;
-      }
-    },
-
     // whether to bind sticky listener
     handlers(bind) {
       const { events } = this;