From 347e980da9ca177d3d2d08527e82c274c3d35ae8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sun, 16 Dec 2018 15:18:14 +0800
Subject: [PATCH] [improvement] Tab: optimize animated tab (#2302)

---
 packages/tab/demo/index.vue                   |  14 +-
 packages/tab/index.vue                        |   6 +-
 .../tab/test/__snapshots__/demo.spec.js.snap  | 262 ++++++++----------
 .../tab/test/__snapshots__/index.spec.js.snap | 168 +++++------
 packages/tabs/index.less                      |  12 +-
 packages/tabs/index.vue                       |  20 +-
 6 files changed, 211 insertions(+), 271 deletions(-)

diff --git a/packages/tab/demo/index.vue b/packages/tab/demo/index.vue
index e1f029b7b..36ab3d273 100644
--- a/packages/tab/demo/index.vue
+++ b/packages/tab/demo/index.vue
@@ -93,14 +93,13 @@
     <demo-block :title="$t('title8')">
       <van-tabs
         animated
-        class="animated-tabs"
       >
         <van-tab
           :title="$t('tab') + index"
           v-for="index in tabs"
           :key="index"
         >
-          <div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div>
+          {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
     </demo-block>
@@ -214,16 +213,5 @@ export default {
       padding: 50px 20px;
     }
   }
-
-  .animated-tabs {
-    .van-tab__pane {
-      padding: 0 20px;
-    }
-  }
-
-  .custom-content-wrap {
-    height: 60px;
-    line-height: 60px;
-  }
 }
 </style>
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 1423f9c79..40234a810 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div
-    :class="b('pane', { inactive: !isSelected, active: isSelected })"
+    v-show="isSelected || parent.animated"
+    :class="b('pane')"
   >
     <slot v-if="inited" />
     <div
@@ -29,8 +30,7 @@ export default create({
 
   data() {
     return {
-      inited: false,
-      paneStyle: {}
+      inited: false
     };
   },
 
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 10d05a574..f00a7f977 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -10,23 +10,21 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
@@ -39,39 +37,37 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
@@ -84,19 +80,17 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
@@ -109,19 +103,17 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
@@ -134,15 +126,13 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
@@ -155,23 +145,21 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
@@ -184,23 +172,21 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <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;">
-                  <!---->
-                  <!----></i>标签
-              </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <div>
+            <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
+                <!---->
+                <!----></i>标签
             </div>
           </div>
-          <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;">
-                  <!---->
-                  <!----></i>标签
-              </div>
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <div>
+            <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
+                <!---->
+                <!----></i>标签
             </div>
           </div>
         </div>
@@ -208,7 +194,7 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="animated-tabs van-tabs van-tabs--line">
+    <div class="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>
@@ -216,19 +202,19 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabs__content">
         <div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
-          <div class="van-tab__pane van-tab__pane--inactive">
+          <div class="van-tab__pane">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
+          <div class="van-tab__pane">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
+          <div class="van-tab__pane">
             <!---->
             <!---->
           </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
+          <div class="van-tab__pane">
             <!---->
             <!---->
           </div>
@@ -244,23 +230,21 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left:0%;">
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
-          <div class="van-tab__pane van-tab__pane--inactive">
-            <!---->
-            <!---->
-          </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
+        </div>
+        <div class="van-tab__pane" style="display:none;">
+          <!---->
+          <!---->
         </div>
       </div>
     </div>
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index 2e188c7b8..5058f4600 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -8,19 +8,17 @@ exports[`change tabs data 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: 0%;">
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <div><span>title2</span></div>
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <div><span>title2</span></div>
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -43,19 +41,17 @@ exports[`change tabs data 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: 0%;">
-      <div class="van-tab__pane van-tab__pane--active">
-        <!---->
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <div><span>title2</span></div>
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="">
+      <!---->
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <div><span>title2</span></div>
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -78,17 +74,15 @@ exports[`click to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: 0%;">
-      <div class="van-tab__pane van-tab__pane--active">Text
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="">Text
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -111,17 +105,15 @@ exports[`click to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: -100%;">
-      <div class="van-tab__pane van-tab__pane--inactive">Text
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--active">
-        Text
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="display: none;">Text
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="">
+      Text
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -144,17 +136,15 @@ exports[`swipe to switch tab 1`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: 0%;">
-      <div class="van-tab__pane van-tab__pane--active">Text
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="">Text
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -177,17 +167,15 @@ exports[`swipe to switch tab 2`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: -100%;">
-      <div class="van-tab__pane van-tab__pane--inactive">Text
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--active">
-        Text
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="display: none;">Text
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="">
+      Text
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -210,17 +198,15 @@ exports[`swipe to switch tab 3`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: -100%;">
-      <div class="van-tab__pane van-tab__pane--inactive">Text
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--active">
-        Text
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="display: none;">Text
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="">
+      Text
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
@@ -243,17 +229,15 @@ exports[`swipe to switch tab 4`] = `
     </div>
   </div>
   <div class="van-tabs__content">
-    <div class="van-tabs__track" style="left: 0%;">
-      <div class="van-tab__pane van-tab__pane--active">Text
-        <!---->
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        Text
-      </div>
-      <div class="van-tab__pane van-tab__pane--inactive">
-        <!---->
-        <!---->
-      </div>
+    <div class="van-tab__pane" style="">Text
+      <!---->
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      Text
+    </div>
+    <div class="van-tab__pane" style="display: none;">
+      <!---->
+      <!---->
     </div>
   </div>
 </div>
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index 74b282159..36b3fe6fe 100644
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@@ -148,17 +148,7 @@
 
   .van-tab__pane {
     width: 100%;
-    box-sizing: border-box;
     flex-shrink: 0;
-    overflow-y: auto;
-
-    &--inactive {
-      height: 0;
-      overflow: visible;
-    }
-
-    &--active {
-      height: auto;
-    }
+    box-sizing: border-box;
   }
 }
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index e7da8d176..2417332e3 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -44,11 +44,13 @@
       :class="b('content')"
     >
       <div
+        v-if="animated"
         :class="b('track')"
         :style="trackStyle"
       >
         <slot />
       </div>
+      <slot v-else />
     </div>
   </div>
 </template>
@@ -145,20 +147,12 @@ export default create({
     },
 
     trackStyle() {
-      const {
-        curActive,
-        animated
-      } = this;
-
-      const trackStyle = {
-        left: `${-1 * curActive * 100}%`
-      };
-
-      if (animated) {
-        trackStyle.transitionDuration = `${this.duration}s`;
+      if (this.animated) {
+        return {
+          left: `${-1 * this.curActive * 100}%`,
+          transitionDuration: `${this.duration}s`
+        };
       }
-
-      return trackStyle;
     }
   },