[improvement] Tabs: add animated props to change tabs with animation (#957)

example/pages/tab/index.wxml

@@ -68,3 +68,17 @@
     </van-tab>
   </van-tabs>
 </demo-block>
+
+<demo-block title="切换动画">
+  <van-tabs animated>
+    <van-tab
+      wx:for="1234"
+      wx:key="index"
+      title="{{ '标签' + item }}"
+    >
+      <view class="content">
+        {{ '内容' + item }}
+      </view>
+    </van-tab>
+  </van-tabs>
+</demo-block>

packages/tab/README.md

@@ -111,6 +111,19 @@ Page({
 });
 ```
 
+#### 切换动画
+
+可以通过`animated`来设置是否启用切换tab时的动画。
+
+```html
+<van-tabs animated>
+  <van-tab title="标签 1">内容 1</van-tab>
+  <van-tab title="标签 2">内容 2</van-tab>
+  <van-tab title="标签 3">内容 3</van-tab>
+  <van-tab title="标签 4">内容 4</van-tab>
+</van-tabs>
+```
+
 ### Tabs API
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -120,9 +133,10 @@ Page({
 | z-index | z-index 层级 | `Number` | `1` |
 | type | 样式风格，可选值为`card` | `String` | `line` |
 | border | 是否展示外边框，仅在`line`风格下生效 | `Boolean` | `true` |
-| duration | 动画时间 (单位秒)  | `Number` | `0.2` |
+| duration | 动画时间 (单位秒)  | `Number` | `0.3` |
 | line-width | 底部条宽度 (px) | `Number` | 与当前标签等宽 |
 | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | `Number` | `4` |
+| animated | 是否使用动画切换 Tabs | `Boolean` | - |
 
 ### Tab API
 

packages/tab/index.less

@@ -0,0 +1,7 @@
+.van-tab__pane {
+  box-sizing: border-box;
+
+  &--float {
+    float: left;
+  }
+}

packages/tab/index.ts

@@ -13,7 +13,9 @@ VantComponent({
 
   data: {
     inited: false,
-    active: false
+    active: false,
+    animated: false,
+    width: null
   },
 
   watch: {

packages/tab/index.wxml

@@ -1,7 +1,7 @@
 <view
-  wx:if="{{ inited }}"
+  wx:if="{{ animated || inited }}"
-  class="custom-class van-tab__pane"
+  class="custom-class van-tab__pane {{ animated ? 'van-tab__pane--float' : '' }}"
-  style="{{ active ? '' : 'display: none' }}"
+  style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
 >
   <slot />
 </view>

packages/tabs/index.less

@@ -90,6 +90,10 @@
       height: @van-tabs-card-height;
     }
   }
+
+  &__content {
+    overflow: hidden;
+  }
 }
 
 .van-tab {

packages/tabs/index.ts

@@ -3,6 +3,8 @@ import { VantComponent } from '../common/component';
 type TabItemData = {
   active: boolean;
   inited?: boolean;
+  animated?: boolean;
+  width?: Number;
 };
 
 VantComponent({
@@ -42,7 +44,7 @@ VantComponent({
     },
     duration: {
       type: Number,
-      value: 0.2
+      value: 0.3
     },
     zIndex: {
       type: Number,
@@ -51,14 +53,16 @@ VantComponent({
     swipeThreshold: {
       type: Number,
       value: 4
-    }
+    },
+    animated: Boolean
   },
 
   data: {
     tabs: [],
     lineStyle: '',
     scrollLeft: 0,
-    scrollable: false
+    scrollable: false,
+    trackStyle: ''
   },
 
   watch: {
@@ -69,7 +73,8 @@ VantComponent({
     },
     color: 'setLine',
     lineWidth: 'setLine',
-    active: 'setActiveTab'
+    active: 'setActiveTab',
+    animated: 'setTrack'
   },
 
   beforeCreate() {
@@ -78,6 +83,7 @@ VantComponent({
 
   mounted() {
     this.setLine();
+    this.setTrack();
     this.scrollIntoView();
   },
 
@@ -151,6 +157,38 @@ VantComponent({
       });
     },
 
+    setTrack() {
+      const {
+        animated,
+        active,
+        duration
+      } = this.data;
+
+      if (!animated) return '';
+
+      this.getRect('.van-tabs__content').then(rect => {
+        const { width } = rect;
+
+        this.setData({
+          trackStyle: `
+            width: ${width * this.child.length}px;
+            transform: translateX(${-1 * active * width}px);
+            transition-duration: ${duration}s;
+          `
+        });
+        this.setTabsProps({
+          width,
+          animated
+        })
+      })
+    },
+
+    setTabsProps(props) {
+      this.child.forEach(item => {
+        item.setData(props);
+      });
+    },
+
     setActiveTab() {
       this.child.forEach((item, index) => {
         const data: TabItemData = {
@@ -168,6 +206,7 @@ VantComponent({
 
       this.setData({}, () => {
         this.setLine();
+        this.setTrack();
         this.scrollIntoView();
       });
     },

packages/tabs/index.wxml

@@ -22,5 +22,9 @@
       </view>
     </scroll-view>
   </view>
-  <slot />
+  <view class="van-tabs__content">
+    <view class="van-tabs__track" style="{{ trackStyle }}">
+      <slot />
+    </view>
+  </view>
 </view>