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

packages/tab/demo/index.vue

@@ -92,15 +92,15 @@
 
     <demo-block :title="$t('title8')">
       <van-tabs
-        :active="active"
         animated
+        class="animated-tabs"
       >
         <van-tab
           :title="$t('tab') + index"
           v-for="index in tabs"
           :key="index"
         >
-          {{ $t('content') }} {{ index }}
+          <div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div>
         </van-tab>
       </van-tabs>
     </demo-block>
@@ -214,5 +214,16 @@ export default {
       padding: 50px 20px;
     }
   }
+
+  .animated-tabs {
+    .van-tab__pane {
+      padding: 0 20px;
+    }
+  }
+
+  .custom-content-wrap {
+    height: 60px;
+    line-height: 60px;
+  }
 }
 </style>

packages/tab/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    v-show="parent.animated || isSelected"
-    :class="b('pane', { float: parent.animated })"
-    :style="paneStyle"
+    :class="b('pane', { inactive: !isSelected, active: isSelected })"
   >
     <slot v-if="inited" />
     <div
@@ -51,12 +49,6 @@ export default create({
       this.inited = this.inited || this.isSelected;
     },
 
-    'parent.computedWidth'(width) {
-      this.paneStyle = {
-        width: `${width}px`
-      };
-    },
-
     title() {
       this.parent.setLine();
     }

packages/tab/test/__snapshots__/demo.spec.js.snap

@@ -10,20 +10,20 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -39,36 +39,36 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -84,16 +84,16 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -109,16 +109,16 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -134,12 +134,12 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -155,20 +155,20 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -184,8 +184,8 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <div>
               <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
@@ -194,7 +194,7 @@ exports[`renders demo correctly 1`] = `
               </div>
             </div>
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <div>
               <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
@@ -208,27 +208,27 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-tabs van-tabs--line">
+    <div class="animated-tabs van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
           <div class="van-tabs__line"></div>
         </div>
       </div>
       <div class="van-tabs__content">
-        <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">
+        <div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane van-tab__pane--float">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane van-tab__pane--float">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane van-tab__pane--float">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
@@ -244,20 +244,20 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="display:none;">
-          <div class="van-tab__pane" style="display:none;">
+        <div class="van-tabs__track" style="left:0%;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane" style="display:none;">
+          <div class="van-tab__pane van-tab__pane--inactive">
             <!---->
             <!---->
           </div>

packages/tab/test/__snapshots__/index.spec.js.snap

@@ -8,16 +8,16 @@ exports[`change tabs data 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="display: none;">
+    <div class="van-tabs__track" style="left: 0%;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -43,16 +43,16 @@ exports[`change tabs data 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="">
+    <div class="van-tabs__track" style="left: 0%;">
+      <div class="van-tab__pane van-tab__pane--active">
         <!---->
         <!---->
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab__pane" style="display: none;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -78,14 +78,14 @@ exports[`click to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="width: 0px;">Text
+    <div class="van-tabs__track" style="left: 0%;">
+      <div class="van-tab__pane van-tab__pane--active">Text
         <!---->
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -111,14 +111,14 @@ exports[`click to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="width: 0px; display: none;">Text
+    <div class="van-tabs__track" style="left: -100%;">
+      <div class="van-tab__pane van-tab__pane--inactive">Text
         <!---->
       </div>
-      <div class="van-tab__pane" style="width: 0px;">
+      <div class="van-tab__pane van-tab__pane--active">
         Text
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -144,14 +144,14 @@ exports[`swipe to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="width: 0px;">Text
+    <div class="van-tabs__track" style="left: 0%;">
+      <div class="van-tab__pane van-tab__pane--active">Text
         <!---->
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -177,14 +177,14 @@ exports[`swipe to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="width: 0px; display: none;">Text
+    <div class="van-tabs__track" style="left: -100%;">
+      <div class="van-tab__pane van-tab__pane--inactive">Text
         <!---->
       </div>
-      <div class="van-tab__pane" style="width: 0px;">
+      <div class="van-tab__pane van-tab__pane--active">
         Text
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -210,14 +210,14 @@ exports[`swipe to switch tab 3`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="width: 0px; display: none;">Text
+    <div class="van-tabs__track" style="left: -100%;">
+      <div class="van-tab__pane van-tab__pane--inactive">Text
         <!---->
       </div>
-      <div class="van-tab__pane" style="width: 0px;">
+      <div class="van-tab__pane van-tab__pane--active">
         Text
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>
@@ -243,14 +243,14 @@ exports[`swipe to switch tab 4`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="display: none;">
-      <div class="van-tab__pane" style="width: 0px;">Text
+    <div class="van-tabs__track" style="left: 0%;">
+      <div class="van-tab__pane van-tab__pane--active">Text
         <!---->
       </div>
-      <div class="van-tab__pane" style="width: 0px; display: none;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         Text
       </div>
-      <div class="van-tab__pane" style="display: none; width: 0px;">
+      <div class="van-tab__pane van-tab__pane--inactive">
         <!---->
         <!---->
       </div>

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;