[bugfix] Tab: incorrect height when use animated prop

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>