From 2bf84cd790c26249cb4fee50eba08521f6857167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 11 May 2019 11:43:30 +0800
Subject: [PATCH] [improvement] Tab: use transform to improve animation
 performance

---
 docs/markdown/v2-progress-tracking.md             | 1 +
 packages/tab/test/__snapshots__/demo.spec.js.snap | 2 +-
 packages/tabs/index.js                            | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index b1903930f..7318579bf 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -134,6 +134,7 @@
 
 ### Tab
 
+- 优化`animated`动画性能
 - 修复开启`animated`后高度错误的问题
 
 ### Tabbar
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 62d0fa71b..4de539d1e 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -206,7 +206,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-tabs__content">
-        <div class="van-tabs__track" style="left: 0%; transition-duration: 0.3s;">
+        <div class="van-tabs__track" style="transform: translate3d(0%, 0, 0); transition-duration: 0.3s;">
           <div class="van-tab__pane-wrapper">
             <div class="van-tab__pane">
               内容 1
diff --git a/packages/tabs/index.js b/packages/tabs/index.js
index c5240132d..79254b03a 100644
--- a/packages/tabs/index.js
+++ b/packages/tabs/index.js
@@ -111,7 +111,7 @@ export default sfc({
     trackStyle() {
       if (this.animated) {
         return {
-          left: `${-1 * this.curActive * 100}%`,
+          transform: `translate3d(${-1 * this.curActive * 100}%, 0, 0)`,
           transitionDuration: `${this.duration}s`
         };
       }