fix(tabs): disabled animated when tabPosition is left/right (#5464)

* fix(tabs): disabled animated when tabPosition is left/right

* fix(tabs): disabled animated when tabPosition is left/right

* test: update test

* test: update test & position demo

Author: buqiyuan

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

@@ -452,12 +452,12 @@ exports[`renders ./components/tabs/demo/position.vue correctly 1`] = `
     <!---->
   </div>
   <div class="ant-tabs-content-holder">
-    <div class="ant-tabs-content ant-tabs-content-top">
+    <div class="ant-tabs-content ant-tabs-content-top ant-tabs-content-animated">
       <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active" id="rc-tabs-test-panel-1" aria-labelledby="rc-tabs-test-tab-1">Content of Tab 1</div>
-      <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-2" aria-labelledby="rc-tabs-test-tab-2">
+      <div role="tabpanel" tabindex="-1" aria-hidden="true" style="visibility: hidden; height: 0px; overflow-y: hidden;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-2" aria-labelledby="rc-tabs-test-tab-2">
         <!---->
       </div>
-      <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-3" aria-labelledby="rc-tabs-test-tab-3">
+      <div role="tabpanel" tabindex="-1" aria-hidden="true" style="visibility: hidden; height: 0px; overflow-y: hidden;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-3" aria-labelledby="rc-tabs-test-tab-3">
         <!---->
       </div>
     </div>

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

@@ -11,7 +11,7 @@ exports[`Tabs tabPosition remove card 1`] = `
           <!---->
         </div>
         <!---->
-        <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+        <div class="ant-tabs-ink-bar"></div>
       </div>
     </div>
     <div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden">

components/tabs/demo/position.vue

@@ -23,7 +23,7 @@ Tab's position: left, right, top or bottom.  Will auto switch to `top` in mobile
     <a-radio-button value="left">left</a-radio-button>
     <a-radio-button value="right">right</a-radio-button>
   </a-radio-group>
-  <a-tabs v-model:activeKey="activeKey" :tab-position="tabPosition">
+  <a-tabs v-model:activeKey="activeKey" :tab-position="tabPosition" animated>
     <a-tab-pane key="1" tab="Tab 1">Content of Tab 1</a-tab-pane>
     <a-tab-pane key="2" tab="Tab 2">Content of Tab 2</a-tab-pane>
     <a-tab-pane key="3" tab="Tab 3">Content of Tab 3</a-tab-pane>

components/tabs/index.en-US.md

@@ -22,7 +22,7 @@ Ant Design has 3 types of Tabs for different situations.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | activeKey(v-model) | Current TabPane's key | string | - |  |
-| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |  |
+| animated | Whether to change tabs with animation. Only works while tabPosition=`"top"` \| `"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |  |
 | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false |  |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | } |
 | size | preset tab bar size | `large` \| `default` \| `small` | `default` |  |

components/tabs/index.zh-CN.md

@@ -25,7 +25,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | 参数 | 说明 | 类型 | 默认值 | 版本 |  |
 | --- | --- | --- | --- | --- | --- |
 | activeKey(v-model) | 当前激活 tab 面板的 key | string | 无 |  |  |
-| animated | 是否使用动画切换 Tabs，在 \`tabPosition=top | bottom\` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |  |
+| animated | 是否使用动画切换 Tabs，在 tabPosition=`"top"` \| `"bottom"` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |  |
 | centered | 标签居中展示 | boolean | false | 3.0 |  |
 | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false |  |  |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |  |

components/tabs/src/Tabs.tsx

@@ -155,8 +155,8 @@ const InternalTabs = defineComponent({
     const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
     const rtl = computed(() => direction.value === 'rtl');
     const mergedAnimated = computed<AnimatedConfig>(() => {
-      const { animated } = props;
-      if (animated === false) {
+      const { animated, tabPosition } = props;
+      if (animated === false || ['left', 'right'].includes(tabPosition)) {
         return {
           inkBar: false,
           tabPane: false,