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

This commit is contained in:
neverland
2018-12-16 15:18:14 +08:00
committed by GitHub
parent e2c4d60058
commit 347e980da9
6 changed files with 211 additions and 271 deletions
+123 -139
View File
@@ -10,23 +10,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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@@ -39,39 +37,37 @@ 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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@@ -84,19 +80,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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@@ -109,19 +103,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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@@ -134,15 +126,13 @@ 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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@@ -155,23 +145,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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@@ -184,23 +172,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>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
</div>
</div>
@@ -208,7 +194,7 @@ exports[`renders demo correctly 1`] = `
</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,23 +230,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>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>