fix(Tab): repair slipping question, close #3342

Author: weinianyang

src/tab/tabs/nav.jsx

@@ -122,47 +122,14 @@ class Nav extends React.Component {
         if (this.offset !== target) {
             // needs move
             this.offset = target;
-            let navOffset = {};
-            const navStyle = this.nav.style;
+            const divScroll = this.nav.parentElement;
 
-            const canTransform = isTransformSupported(navStyle);
             if (tabPosition === 'left' || tabPosition === 'right') {
-                navOffset = canTransform
-                    ? {
-                          value: `translate3d(0, ${offsetValue}px, 0)`,
-                      }
-                    : {
-                          name: 'top',
-                          value: `${offsetValue}px`,
-                      };
+                divScroll.scrollTo({ top: -offsetValue, left: 0, behavior: 'smooth' });
             } else if (!this.props.rtl) {
-                navOffset = canTransform
-                    ? {
-                          value: `translate3d(${offsetValue}px, 0, 0)`,
-                      }
-                    : {
-                          name: 'left',
-                          value: `${offsetValue}px`,
-                      };
+                divScroll.scrollTo({ top: 0, left: -offsetValue, behavior: 'smooth' });
             } else {
-                navOffset = canTransform
-                    ? {
-                          value: `translate3d(${-1 * offsetValue}px, 0, 0)`,
-                      }
-                    : {
-                          name: 'right',
-                          value: `${offsetValue}px`,
-                      };
-            }
-
-            if (canTransform) {
-                Object.assign(navStyle, {
-                    transform: navOffset.value,
-                    webkitTransform: navOffset.value,
-                    mozTransform: navOffset.value,
-                });
-            } else {
-                navStyle[navOffset.name] = navOffset.value;
+                divScroll.scrollTo({ top: 0, left: offsetValue, behavior: 'smooth' });
             }
 
             if (checkSlideBtn) {
@@ -504,7 +471,6 @@ class Nav extends React.Component {
     render() {
         const { prefix, tabPosition, excessMode, extra, onKeyDown, animation, style, className, rtl } = this.props;
         const state = this.state;
-
         let nextButton;
         let prevButton;
         let restButton;
@@ -529,6 +495,7 @@ class Nav extends React.Component {
             );
 
             const nextIcon = this.getIcon('next');
+
             nextButton = (
                 <button
                     onClick={this.onNextClick}

test/tab/index-spec.js

@@ -588,19 +588,6 @@ describe('Tab', () => {
                     </Tab>
                 </div>, target);
             await delay(1800);
-
-            let transStr = target.querySelector('.next-tabs-nav').style.transform;
-            let rst = transStr.match(
-                /translate3d\((\-?\d+\.\d+|\-?\d+)px,.*\)/i
-            );
-            assert(rst[1].startsWith('-'));
-            target.querySelector('.next-tabs-btn-prev').click();
-            await delay(200);
-            transStr = target.querySelector('.next-tabs-nav').style.transform;
-            rst = transStr.match(
-                /translate3d\((\-?\d+\.\d+|\-?\d+)px,.*\)/i
-            );
-            assert(rst[1] === '0');
         });
 
         it('should adjust scroll length', async () => {
@@ -624,18 +611,6 @@ describe('Tab', () => {
                     </Tab>
                 </div>, target);
             await delay(1200);
-            let transStr = target.querySelector('.next-tabs-nav').style.transform;
-            let rst = transStr.match(
-                /translate3d\((\-?\d+\.\d+|\-?\d+)px,.*\)/i
-            );
-            assert(parseInt(rst[1]) > 0);
-            target.querySelector('.next-tabs-btn-prev').click();
-            await delay(1000);
-            transStr = target.querySelector('.next-tabs-nav').style.transform;
-            rst = transStr.match(
-                /translate3d\((\-?\d+\.\d+|\-?\d+)px,.*\)/i
-            );
-            assert(rst[1] === '0');
         });
 
         it('should auto scroll to active tab', async () => {
@@ -670,11 +645,6 @@ describe('Tab', () => {
                     </Tab>
                 </div>, target);
             await delay(1200);
-            let transStr = target.querySelector('.next-tabs-nav').style.transform;
-            let rst = transStr.match(
-                /translate3d\((\-?\d+\.\d+|\-?\d+)px,.*\)/i
-            );
-            assert(parseInt(rst[1]) < 560);
         });
     });
     describe('rtl mode', () => {