fix(Tab): support set animated dynamic (#2712)

fix #2597

packages/tabs/index.ts

@@ -38,8 +38,9 @@ VantComponent({
     animated: {
       type: Boolean,
       observer() {
-        this.setTrack();
-        this.children.forEach((child: TrivialInstance) => child.updateRender());
+        this.children.forEach((child: TrivialInstance, index: number) =>
+          child.updateRender(index === this.data.currentIndex, this)
+        );
       }
     },
     swipeable: Boolean,
@@ -100,7 +101,7 @@ VantComponent({
     lazyRender: {
       type: Boolean,
       value: true
-    },
+    }
   },
 
   data: {
@@ -122,7 +123,6 @@ VantComponent({
       container: () => this.createSelectorQuery().select('.van-tabs')
     });
     this.setLine(true);
-    this.setTrack();
     this.scrollIntoView();
   },
 
@@ -206,7 +206,6 @@ VantComponent({
 
       wx.nextTick(() => {
         this.setLine();
-        this.setTrack();
         this.scrollIntoView();
 
         this.trigger('input');
@@ -246,7 +245,9 @@ VantComponent({
           const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
           const height =
             lineHeight !== -1
-              ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(lineHeight)};`
+              ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(
+                lineHeight
+              )};`
               : '';
 
           let left = rects
@@ -273,22 +274,6 @@ VantComponent({
       );
     },
 
-    setTrack() {
-      const { animated, duration, currentIndex } = this.data;
-
-      if (!animated) {
-        return;
-      }
-
-      this.setData({
-        trackStyle: `
-          transform: translate3d(${-100 * currentIndex}%, 0, 0);
-          -webkit-transition-duration: ${duration}s;
-          transition-duration: ${duration}s;
-        `
-      });
-    },
-
     // scroll active tab into view
     scrollIntoView() {
       const { currentIndex, scrollable } = this.data;

packages/tabs/index.wxml

@@ -53,7 +53,10 @@
     bind:touchend="onTouchEnd"
     bind:touchcancel="onTouchEnd"
   >
-    <view class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track" style="{{ trackStyle }}">
+    <view
+      class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track"
+      style="{{ getters.trackStyle({ duration, currentIndex, animated }) }}"
+    >
       <slot />
     </view>
   </view>

packages/tabs/index.wxs

@@ -51,5 +51,18 @@ function tabStyle(
   return styles.join(';');
 }
 
+function trackStyle(data) {
+  if (!data.animated) {
+    return '';
+  }
+
+  return [
+    'transform: translate3d(' + -100 * data.currentIndex + '%, 0, 0)',
+    '-webkit-transition-duration: ' + data.duration + 's',
+    'transition-duration: ' + data.duration + 's'
+  ].join(';');
+}
+
 module.exports.tabClass = tabClass;
 module.exports.tabStyle = tabStyle;
+module.exports.trackStyle = trackStyle;