blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class van-ellipsis van-tab" class="tab-class van-ellipsis van-tab"
@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
> >
<wx-view <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class van-ellipsis van-tab" class="tab-class van-ellipsis van-tab"
@ -337,7 +337,7 @@ exports[`should render demo and match snapshot 1`] = `
> >
<wx-view <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active" 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 <wx-view
class="van-tabs__line" 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 <wx-view
class="tab-class van-ellipsis van-tab" class="tab-class van-ellipsis van-tab"

1
packages/tabs/index.less
View File

@ -91,6 +91,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
opacity: 0;
height: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height); height: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height);
border-radius: 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); 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, skipTransition: true,
scrollWithAnimation: false, scrollWithAnimation: false,
lineOffsetLeft: 0, lineOffsetLeft: 0,
inited: false,
}, },
mounted() { mounted() {
@ -238,13 +239,14 @@ VantComponent({
lineOffsetLeft += lineOffsetLeft +=
(rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8); (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
this.setData({ lineOffsetLeft }); this.setData({ lineOffsetLeft, inited: true });
this.swiping = true; this.swiping = true;
if (skipTransition) { if (skipTransition) {
nextTick(() => { // waiting transition end
setTimeout(() => {
this.setData({ skipTransition: false }); this.setData({ skipTransition: false });
}); }, this.data.duration);
} }
}); });
}, },

2
packages/tabs/index.wxml
View File

@ -20,7 +20,7 @@
style="{{ color ? 'border-color: ' + color : '' }}" style="{{ color ? 'border-color: ' + color : '' }}"
> >
<view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}"> <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 <view
wx:for="{{ tabs }}" wx:for="{{ tabs }}"
wx:key="index" wx:key="index"

1
packages/tabs/index.wxs
View File

@ -60,6 +60,7 @@ function trackStyle(data) {
function lineStyle(data) { function lineStyle(data) {
return style({ return style({
width: utils.addUnit(data.lineWidth), width: utils.addUnit(data.lineWidth),
opacity: data.inited ? 1 : 0,
transform: 'translateX(' + data.lineOffsetLeft + 'px)', transform: 'translateX(' + data.lineOffsetLeft + 'px)',
'-webkit-transform': 'translateX(' + data.lineOffsetLeft + 'px)', '-webkit-transform': 'translateX(' + data.lineOffsetLeft + 'px)',
'background-color': data.color, 'background-color': data.color,