blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

fix(tabs): fix issue with component init animation (#5115)

Browse Source
This commit is contained in:
landluck 2022-11-29 11:26:05 +08:00 committed by GitHub
parent 56cc44f60e
commit c6bff2718a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/empty/test/__snapshots__/demo.spec.ts.snap
View File

@ -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"

2
packages/icon/test/__snapshots__/demo.spec.ts.snap
View File

@ -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"

2
packages/index-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -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"

18
packages/tab/test/__snapshots__/demo.spec.ts.snap
View File

@ -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"

1
packages/tabs/index.less
View File

@ -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);

8
packages/tabs/index.ts
View File

@ -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);
}
});
},

2
packages/tabs/index.wxml
View File

@ -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"

1
packages/tabs/index.wxs
View File

@ -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,