From c6bff2718a835c1016f016e8fa6405c230b23518 Mon Sep 17 00:00:00 2001
From: landluck <landl_ww@163.com>
Date: Tue, 29 Nov 2022 11:26:05 +0800
Subject: [PATCH] fix(tabs): fix issue with component init animation (#5115)

---
 .../empty/test/__snapshots__/demo.spec.ts.snap |  2 +-
 .../icon/test/__snapshots__/demo.spec.ts.snap  |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap       |  2 +-
 .../tab/test/__snapshots__/demo.spec.ts.snap   | 18 +++++++++---------
 packages/tabs/index.less                       |  1 +
 packages/tabs/index.ts                         |  8 +++++---
 packages/tabs/index.wxml                       |  2 +-
 packages/tabs/index.wxs                        |  1 +
 8 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/packages/empty/test/__snapshots__/demo.spec.ts.snap b/packages/empty/test/__snapshots__/demo.spec.ts.snap
index 659156ff..6f0fc5ef 100644
--- a/packages/empty/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/empty/test/__snapshots__/demo.spec.ts.snap
@@ -85,7 +85,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
diff --git a/packages/icon/test/__snapshots__/demo.spec.ts.snap b/packages/icon/test/__snapshots__/demo.spec.ts.snap
index 38a59369..a7ea542e 100644
--- a/packages/icon/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/icon/test/__snapshots__/demo.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`should render demo and match snapshot 1`] = `
                 >
                   <wx-view
                     class="van-tabs__line"
-                    style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px);background-color:#1989fa"
+                    style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px);background-color:#1989fa"
                   />
                   <wx-view
                     class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
diff --git a/packages/index-bar/test/__snapshots__/demo.spec.ts.snap b/packages/index-bar/test/__snapshots__/demo.spec.ts.snap
index 5217165e..dae318dd 100644
--- a/packages/index-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/index-bar/test/__snapshots__/demo.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`should render demo and match snapshot 1`] = `
                 >
                   <wx-view
                     class="van-tabs__line"
-                    style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                    style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                   />
                   <wx-view
                     class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
diff --git a/packages/tab/test/__snapshots__/demo.spec.ts.snap b/packages/tab/test/__snapshots__/demo.spec.ts.snap
index 8e4aa74d..1a4f15e7 100644
--- a/packages/tab/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.ts.snap
@@ -44,7 +44,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class van-ellipsis van-tab"
@@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class van-ellipsis van-tab"
@@ -337,7 +337,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
@@ -538,7 +538,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
@@ -810,7 +810,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
@@ -925,7 +925,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
@@ -1082,7 +1082,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
@@ -1239,7 +1239,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
@@ -1400,7 +1400,7 @@ exports[`should render demo and match snapshot 1`] = `
                     >
                       <wx-view
                         class="van-tabs__line"
-                        style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px)"
+                        style="width:40px;opacity:0;transform:translateX(0px);-webkit-transform:translateX(0px)"
                       />
                       <wx-view
                         class="tab-class van-ellipsis van-tab"
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index bd655315..486829b8 100644
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@@ -91,6 +91,7 @@
     bottom: 0;
     left: 0;
     z-index: 1;
+    opacity: 0;
     height: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height);
     border-radius: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height);
     background-color: var(--tabs-bottom-bar-color, @tabs-bottom-bar-color);
diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts
index 3d1d9ce6..7236dcd2 100644
--- a/packages/tabs/index.ts
+++ b/packages/tabs/index.ts
@@ -98,6 +98,7 @@ VantComponent({
     skipTransition: true,
     scrollWithAnimation: false,
     lineOffsetLeft: 0,
+    inited: false,
   },
 
   mounted() {
@@ -238,13 +239,14 @@ VantComponent({
         lineOffsetLeft +=
           (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
 
-        this.setData({ lineOffsetLeft });
+        this.setData({ lineOffsetLeft, inited: true });
         this.swiping = true;
 
         if (skipTransition) {
-          nextTick(() => {
+          // waiting transition end
+          setTimeout(() => {
             this.setData({ skipTransition: false });
-          });
+          }, this.data.duration);
         }
       });
     },
diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml
index f76dd63f..6fcb57f0 100644
--- a/packages/tabs/index.wxml
+++ b/packages/tabs/index.wxml
@@ -20,7 +20,7 @@
         style="{{ color ? 'border-color: ' + color : '' }}"
       >
         <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
-          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
+          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth, inited }) }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"
diff --git a/packages/tabs/index.wxs b/packages/tabs/index.wxs
index a027c7b9..4059c7f4 100644
--- a/packages/tabs/index.wxs
+++ b/packages/tabs/index.wxs
@@ -60,6 +60,7 @@ function trackStyle(data) {
 function lineStyle(data) {
   return style({
     width: utils.addUnit(data.lineWidth),
+    opacity: data.inited ? 1 : 0,
     transform: 'translateX(' + data.lineOffsetLeft + 'px)',
     '-webkit-transform': 'translateX(' + data.lineOffsetLeft + 'px)',
     'background-color': data.color,