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

6
packages/tab/index.vue
View File

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

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

@ -10,27 +10,25 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</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 class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
@ -39,43 +37,41 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</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 class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
@ -84,23 +80,21 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</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 class="van-tabs van-tabs--card">
<div class="van-tabs__wrap">
@ -109,23 +103,21 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</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 class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
@ -134,19 +126,17 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</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 class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
@ -155,27 +145,25 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</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 class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
@ -184,8 +172,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<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 class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<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 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__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
@ -216,19 +202,19 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-tabs__content">
<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 class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
@ -244,26 +230,24 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
`;

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

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

12
packages/tabs/index.less
View File

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

18
packages/tabs/index.vue
View File

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