[improvement] Tab: optimize animated tab (#2302)
This commit is contained in:
neverland
@@ -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>
|
||||
|
||||
@@ -8,19 +8,17 @@ 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>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<div><span>title2</span></div>
|
||||
</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><span>title2</span></div>
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,19 +41,17 @@ 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>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<div><span>title2</span></div>
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<div><span>title2</span></div>
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,17 +74,15 @@ 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>
|
||||
<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="">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,17 +105,15 @@ 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>
|
||||
<div class="van-tab__pane van-tab__pane--active">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,17 +136,15 @@ 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>
|
||||
<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="">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,17 +167,15 @@ 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>
|
||||
<div class="van-tab__pane van-tab__pane--active">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -210,17 +198,15 @@ 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>
|
||||
<div class="van-tab__pane van-tab__pane--active">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -243,17 +229,15 @@ 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>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--inactive">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="">Text
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
Text
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user