fix: tabs show scroll anim and tag anim ease (#7218)

* fix: tabs show scroll anim and tag anim ease

* update snapshot

components/tabs/__tests__/__snapshots__/demo.test.js.snap

@@ -97,6 +97,7 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
 exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation"
+  type="card"
 >
   <div
     class="ant-tabs-bar"
@@ -193,6 +194,7 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
 >
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-no-animation"
+    type="card"
   >
     <div
       class="ant-tabs-bar"
@@ -308,6 +310,7 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
   </div>
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation"
+    type="editable-card"
   >
     <div
       class="ant-tabs-bar"
@@ -479,6 +482,7 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
     <div
       aria-hidden="true"
       class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+      disabled=""
       role="tabpanel"
     />
     <div
@@ -493,6 +497,7 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
 exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top ant-tabs-card ant-tabs-editable-card ant-tabs-no-animation"
+  type="editable-card"
 >
   <div
     class="ant-tabs-bar"

components/tabs/__tests__/__snapshots__/index.test.js.snap

@@ -22,6 +22,7 @@ exports[`Tabs tabPosition remove card 1`] = `
   >
     <div
       className="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line"
+      onChange={[Function]}
       style={Object {}}
     >
       <ScrollableInkTabBar
@@ -59,11 +60,11 @@ exports[`Tabs tabPosition remove card 1`] = `
         >
           <div
             className="ant-tabs-nav-container"
-            onTransitionEnd={[Function]}
           >
             <span
               className="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"
               onClick={null}
+              onTransitionEnd={[Function]}
               unselectable="unselectable"
             >
               <span

components/tabs/style/index.less

@@ -26,7 +26,7 @@
     border-bottom: @border-width-base @border-style-base @border-color-base;
     margin-bottom: 16px;
     outline: none;
-    transition: padding .45s;
+    transition: padding .3s @ease-in-out;
   }
 
   &-nav-container {
@@ -37,7 +37,7 @@
     position: relative;
     white-space: nowrap;
     margin-bottom: -1px;
-    transition: padding .45s;
+    transition: padding .3s @ease-in-out;
     .clearfix;
 
     &-scrolling {
@@ -51,7 +51,7 @@
     user-select: none;
     z-index: 2;
     width: 0;
-    height: 0;
+    height: 100%;
     line-height: 32px;
     cursor: pointer;
     border: 0;
@@ -59,7 +59,7 @@
     position: absolute;
     text-align: center;
     color: @text-color-secondary;
-    transition: width .3s, height .3s, opacity .3s, color .3s;
+    transition: width .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
     opacity: 0;
     pointer-events: none;
 
@@ -134,7 +134,7 @@
   &-nav {
     box-sizing: border-box;
     padding-left: 0;
-    transition: transform 0.5s @ease-in-out;
+    transition: transform 0.3s @ease-in-out;
     position: relative;
     margin: 0;
     list-style: none;
@@ -230,7 +230,11 @@
     > .@{tab-prefix-cls}-bar {
       border-bottom: 0;
       height: 100%;
-
+      &-tab-prev, &-tab-next {
+        width: 32px;
+        height: 0;
+        transition: height .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
+      }
       &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
       &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
         width: 100%;

components/tag/style/index.less

@@ -12,7 +12,7 @@
   border: @border-width-base @border-style-base @border-color-split;
   background: @tag-default-bg;
   font-size: @tag-font-size;
-  transition: all 0.3s @ease-in-out-circ;
+  transition: all 0.3s @ease-out;
   opacity: 1;
   margin-right: 8px;
   cursor: pointer;
@@ -41,7 +41,7 @@
     cursor: pointer;
     font-weight: bold;
     margin-left: 3px;
-    transition: all 0.3s ease;
+    transition: all 0.3s @ease-out;
     opacity: 0.66;
 
     &:hover {

package.json

@@ -65,7 +65,7 @@
     "rc-steps": "~2.5.1",
     "rc-switch": "~1.5.1",
     "rc-table": "~5.4.0",
-    "rc-tabs": "~9.0.2",
+    "rc-tabs": "~9.1.2",
     "rc-time-picker": "~2.4.1",
     "rc-tooltip": "~3.4.6",
     "rc-tree": "~1.7.0",