blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tab: optimize animated tab (#2302)

Browse Source
This commit is contained in:
neverland 2018-12-16 15:18:14 +08:00 committed by GitHub
parent e2c4d60058
commit 347e980da9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 211 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/tab/demo/index.vue
View File

@ -93,14 +93,13 @@
<demo-block :title="$t('title8')"> <demo-block :title="$t('title8')">
<van-tabs <van-tabs
animated animated
class="animated-tabs"
> >
<van-tab <van-tab
:title="$t('tab') + index" :title="$t('tab') + index"
v-for="index in tabs" v-for="index in tabs"
:key="index" :key="index"
> >
<div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div> {{ $t('content') }} {{ index }}
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</demo-block> </demo-block>
@ -214,16 +213,5 @@ export default {
padding: 50px 20px; padding: 50px 20px;
} }
} }
.animated-tabs {
.van-tab__pane {
padding: 0 20px;
}
}
.custom-content-wrap {
height: 60px;
line-height: 60px;
}
} }
</style> </style>

6
packages/tab/index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div <div
:class="b('pane', { inactive: !isSelected, active: isSelected })" v-show="isSelected || parent.animated"
:class="b('pane')"
> >
<slot v-if="inited" /> <slot v-if="inited" />
<div <div
@ -29,8 +30,7 @@ export default create({
data() { data() {
return { return {
inited: false, inited: false
paneStyle: {}
}; };
}, },

86
packages/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -10,27 +10,25 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
@ -39,43 +37,41 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
@ -84,23 +80,21 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-tabs van-tabs--card"> <div class="van-tabs van-tabs--card">
<div class="van-tabs__wrap"> <div class="van-tabs__wrap">
@ -109,23 +103,21 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
@ -134,19 +126,17 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
@ -155,27 +145,25 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
@ -184,8 +172,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<div> <div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;"> <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
@ -194,7 +181,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<div> <div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;"> <div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
@ -206,9 +193,8 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
<div> <div>
<div class="animated-tabs van-tabs van-tabs--line"> <div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom"> <div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;"> <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div> <div class="van-tabs__line"></div>
@ -216,19 +202,19 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;transition-duration:0.3s;"> <div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane">
<!----> <!---->
<!----> <!---->
</div> </div>
@ -244,20 +230,19 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;"> <div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display:none;">
<!----> <!---->
<!----> <!---->
</div> </div>
@ -265,5 +250,4 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;

64
packages/tab/test/__snapshots__/index.spec.js.snap
View File

@ -8,22 +8,20 @@ exports[`change tabs data 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;"> <div class="van-tab__pane" style="display: none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<div><span>title2</span></div> <div><span>title2</span></div>
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`change tabs data 2`] = ` exports[`change tabs data 2`] = `
@ -43,22 +41,20 @@ exports[`change tabs data 2`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;"> <div class="van-tab__pane" style="">
<div class="van-tab__pane van-tab__pane--active">
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<div><span>title2</span></div> <div><span>title2</span></div>
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`click to switch tab 1`] = ` exports[`click to switch tab 1`] = `
@ -78,20 +74,18 @@ exports[`click to switch tab 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;"> <div class="van-tab__pane" style="">Text
<div class="van-tab__pane van-tab__pane--active">Text
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`click to switch tab 2`] = ` exports[`click to switch tab 2`] = `
@ -111,20 +105,18 @@ exports[`click to switch tab 2`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: -100%;"> <div class="van-tab__pane" style="display: none;">Text
<div class="van-tab__pane van-tab__pane--inactive">Text
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--active"> <div class="van-tab__pane" style="">
Text Text
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`swipe to switch tab 1`] = ` exports[`swipe to switch tab 1`] = `
@ -144,20 +136,18 @@ exports[`swipe to switch tab 1`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;"> <div class="van-tab__pane" style="">Text
<div class="van-tab__pane van-tab__pane--active">Text
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`swipe to switch tab 2`] = ` exports[`swipe to switch tab 2`] = `
@ -177,20 +167,18 @@ exports[`swipe to switch tab 2`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: -100%;"> <div class="van-tab__pane" style="display: none;">Text
<div class="van-tab__pane van-tab__pane--inactive">Text
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--active"> <div class="van-tab__pane" style="">
Text Text
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`swipe to switch tab 3`] = ` exports[`swipe to switch tab 3`] = `
@ -210,20 +198,18 @@ exports[`swipe to switch tab 3`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: -100%;"> <div class="van-tab__pane" style="display: none;">Text
<div class="van-tab__pane van-tab__pane--inactive">Text
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--active"> <div class="van-tab__pane" style="">
Text Text
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;
exports[`swipe to switch tab 4`] = ` exports[`swipe to switch tab 4`] = `
@ -243,18 +229,16 @@ exports[`swipe to switch tab 4`] = `
</div> </div>
</div> </div>
<div class="van-tabs__content"> <div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;"> <div class="van-tab__pane" style="">Text
<div class="van-tab__pane van-tab__pane--active">Text
<!----> <!---->
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
Text Text
</div> </div>
<div class="van-tab__pane van-tab__pane--inactive"> <div class="van-tab__pane" style="display: none;">
<!----> <!---->
<!----> <!---->
</div> </div>
</div> </div>
</div> </div>
</div>
`; `;

12
packages/tabs/index.less
View File

@ -148,17 +148,7 @@
.van-tab__pane { .van-tab__pane {
width: 100%; width: 100%;
box-sizing: border-box;
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto; box-sizing: border-box;
&--inactive {
height: 0;
overflow: visible;
}
&--active {
height: auto;
}
} }
} }

18
packages/tabs/index.vue
View File

@ -44,11 +44,13 @@
:class="b('content')" :class="b('content')"
> >
<div <div
v-if="animated"
:class="b('track')" :class="b('track')"
:style="trackStyle" :style="trackStyle"
> >
<slot /> <slot />
</div> </div>
<slot v-else />
</div> </div>
</div> </div>
</template> </template>
@ -145,20 +147,12 @@ export default create({
}, },
trackStyle() { trackStyle() {
const { if (this.animated) {
curActive, return {
animated left: `${-1 * this.curActive * 100}%`,
} = this; transitionDuration: `${this.duration}s`
const trackStyle = {
left: `${-1 * curActive * 100}%`
}; };
if (animated) {
trackStyle.transitionDuration = `${this.duration}s`;
} }
return trackStyle;
} }
}, },