[bugfix] Tab: incorrect height when use animated prop

docs/markdown/v2-progress-tracking.md

@@ -73,6 +73,10 @@
 
 - 新增`label-class`属性
 
+### GoodsActionButton
+
+- 新增`type`属性
+
 ### Icon
 
 - 支持`Number`类型的`size`属性
@@ -128,6 +132,10 @@
 - 新增`preview-open`事件
 - 新增`preview-close`事件
 
+### Tab
+
+- 修复开启`animated`后高度错误的问题
+
 ### Tabbar
 
 - 新增`inactive-color`属性

packages/tab/demo/index.vue

@@ -91,9 +91,7 @@
     </demo-block>
 
     <demo-block :title="$t('title8')">
-      <van-tabs
-        animated
-      >
+      <van-tabs animated>
         <van-tab
           :title="$t('tab') + index"
           v-for="index in tabs"
@@ -186,32 +184,12 @@ export default {
   }
 
   .van-tab__pane {
-    padding: 20px;
+    padding: 25px 20px;
     background-color: @white;
   }
 
   .van-tabs--card .van-tab__pane {
     background-color: transparent;
   }
-
-  .custom-tabwrap .van-tab-active {
-    color: #20a0ff;
-  }
-
-  .custom-tabwrap .van-tabs-nav-bar {
-    background: #20a0ff;
-  }
-
-  .custom-pane {
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-  }
-
-  .van-doc-demo-block:last-child {
-    .van-tab__pane {
-      padding: 50px 20px;
-    }
-  }
 }
 </style>

packages/tab/index.js

@@ -44,10 +44,22 @@ export default sfc({
     const { slots } = this;
     const shouldRender = this.inited || !this.parent.lazyRender;
 
+    const Content = [
+      shouldRender ? slots() : h(),
+      slots('title') && <div ref="title">{slots('title')}</div>
+    ];
+
+    if (this.parent.animated) {
+      return (
+        <div class={bem('pane-wrapper', { inactive: !this.selected })}>
+          <div class={bem('pane')}>{Content}</div>
+        </div>
+      );
+    }
+
     return (
-      <div vShow={this.selected || this.parent.animated} class={bem('pane')}>
-        {shouldRender ? slots() : h()}
-        {slots('title') && <div ref="title">{slots('title')}</div>}
+      <div vShow={this.selected} class={bem('pane')}>
+        {Content}
       </div>
     );
   }

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

@@ -205,19 +205,27 @@ exports[`renders demo correctly 1`] = `
           <div class="van-tab"><span class="van-ellipsis">标签 4</span></div>
         </div>
       </div>
-      <div class="van-tabs__content van-tabs__content--animated">
+      <div class="van-tabs__content">
         <div class="van-tabs__track" style="left: 0%; transition-duration: 0.3s;">
-          <div class="van-tab__pane">
-            内容 1
+          <div class="van-tab__pane-wrapper">
+            <div class="van-tab__pane">
+              内容 1
+            </div>
           </div>
-          <div class="van-tab__pane">
-            <!---->
+          <div class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
+            <div class="van-tab__pane">
+              <!---->
+            </div>
           </div>
-          <div class="van-tab__pane">
-            <!---->
+          <div class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
+            <div class="van-tab__pane">
+              <!---->
+            </div>
           </div>
-          <div class="van-tab__pane">
-            <!---->
+          <div class="van-tab__pane-wrapper van-tab__pane-wrapper--inactive">
+            <div class="van-tab__pane">
+              <!---->
+            </div>
           </div>
         </div>
       </div>

packages/tabs/index.js

@@ -442,7 +442,7 @@ export default sfc({
             {this.slots('nav-right')}
           </div>
         </div>
-        <div ref="content" class={bem('content', { animated })}>
+        <div ref="content" class={bem('content')}>
           {animated ? (
             <div class={bem('track')} style={this.trackStyle}>
               {this.slots()}

packages/tabs/index.less

@@ -117,12 +117,6 @@
     border-radius: 3px;
   }
 
-  &__content {
-    &--animated {
-      overflow: hidden;
-    }
-  }
-
   &__track {
     position: relative;
     display: flex;
@@ -146,10 +140,18 @@
       height: @tabs-card-height;
     }
   }
+}
 
-  .van-tab__pane {
+.van-tab__pane {
+  &,
+  &-wrapper {
     flex-shrink: 0;
     box-sizing: border-box;
     width: 100%;
   }
+
+  &-wrapper--inactive {
+    height: 0;
+    overflow: visible;
+  }
 }