[new feature] Tabs: add animated props to change tabs with animation (#2126)
This commit is contained in:
张敏
neverland
@@ -10,21 +10,23 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<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 class="van-tabs__track" style="display:none;">
|
||||
<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>
|
||||
</div>
|
||||
@@ -37,37 +39,39 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<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 class="van-tabs__track" style="display:none;">
|
||||
<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>
|
||||
</div>
|
||||
@@ -80,17 +84,19 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<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 class="van-tabs__track" style="display:none;">
|
||||
<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>
|
||||
</div>
|
||||
@@ -103,92 +109,100 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<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 class="van-tabs__track" style="display:none;">
|
||||
<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 class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<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">
|
||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<div>
|
||||
<i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
</i>标签
|
||||
<div>
|
||||
<i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
|
||||
<!---->
|
||||
</i>标签
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
@@ -203,21 +217,52 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-tabs__track" style="width:0px;transition-duration:0.4s;transform:translateX(0px);display:none;">
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane van-tab__pane--float">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tab__pane" style="display:none;">
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div class="van-tabs__track" style="display:none;">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user