From 1b105983d9c497e79cd58361b1afc6c0696f2f97 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Mon, 4 Mar 2024 18:28:17 +0800
Subject: [PATCH] feat(tabs): add animated-time demo (#2942)

---
 .../src/nav/pages/tabs/animated-time.vue              | 11 +++++++++++
 packages/nutui-taro-demo/src/nav/pages/tabs/index.vue |  6 ++++++
 src/packages/__VUE/tabs/demo/animated-time.vue        | 11 +++++++++++
 src/packages/__VUE/tabs/demo/index.vue                |  6 ++++++
 src/packages/__VUE/tabs/doc.en-US.md                  |  8 ++++++++
 src/packages/__VUE/tabs/doc.md                        |  8 ++++++++
 src/packages/__VUE/tabs/doc.taro.md                   |  8 ++++++++
 7 files changed, 58 insertions(+)
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/animated-time.vue
 create mode 100644 src/packages/__VUE/tabs/demo/animated-time.vue

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/animated-time.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/animated-time.vue
new file mode 100644
index 0000000000..81f03a416e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/animated-time.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" :animated-time="0">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
index 93dd5e313e..9bcfc454ae 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
@@ -6,6 +6,9 @@
     <h2>{{ t('smile') }}</h2>
     <Smile />
 
+    <h2>{{ t('animatedTime') }}</h2>
+    <AnimatedTime />
+
     <h2>{{ t('leftAlign') }}</h2>
     <LeftAlign />
 
@@ -36,6 +39,7 @@
 import { useTranslate } from '../../../utils';
 import Basic from './basic.vue';
 import Smile from './smile.vue';
+import AnimatedTime from './animated-time.vue';
 import AutoHeight from './auto-height.vue';
 import Swipeable from './swipeable.vue';
 import Scroll from './scroll.vue';
@@ -49,6 +53,7 @@ const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     smile: '微笑曲线',
+    animatedTime: '无切换动画',
     leftAlign: 'Title 左对齐',
     autoHeight: '自动高度',
     swipeable: '手势滑动切换',
@@ -61,6 +66,7 @@ const t = useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     smile: 'Smile Type',
+    animatedTime: 'Without Animation',
     leftAlign: 'Title left align',
     autoHeight: 'Auto Height',
     swipeable: 'Swipeable',
diff --git a/src/packages/__VUE/tabs/demo/animated-time.vue b/src/packages/__VUE/tabs/demo/animated-time.vue
new file mode 100644
index 0000000000..81f03a416e
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/animated-time.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" :animated-time="0">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/index.vue b/src/packages/__VUE/tabs/demo/index.vue
index b3942f61f1..638e75b5ae 100644
--- a/src/packages/__VUE/tabs/demo/index.vue
+++ b/src/packages/__VUE/tabs/demo/index.vue
@@ -6,6 +6,9 @@
     <h2>{{ t('smile') }}</h2>
     <Smile />
 
+    <h2>{{ t('animatedTime') }}</h2>
+    <AnimatedTime />
+
     <h2>{{ t('leftAlign') }}</h2>
     <LeftAlign />
 
@@ -36,6 +39,7 @@
 import { useTranslate } from '@/sites/utils';
 import Basic from './basic.vue';
 import Smile from './smile.vue';
+import AnimatedTime from './animated-time.vue';
 import AutoHeight from './auto-height.vue';
 import Swipeable from './swipeable.vue';
 import Scroll from './scroll.vue';
@@ -49,6 +53,7 @@ const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     smile: '微笑曲线',
+    animatedTime: '无切换动画',
     leftAlign: 'Title 左对齐',
     autoHeight: '自动高度',
     swipeable: '手势滑动切换',
@@ -61,6 +66,7 @@ const t = useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     smile: 'Smile Type',
+    animatedTime: 'Without Animation',
     leftAlign: 'Title left align',
     autoHeight: 'Auto Height',
     swipeable: 'Swipeable',
diff --git a/src/packages/__VUE/tabs/doc.en-US.md b/src/packages/__VUE/tabs/doc.en-US.md
index c82d212da4..ddf8501d7f 100644
--- a/src/packages/__VUE/tabs/doc.en-US.md
+++ b/src/packages/__VUE/tabs/doc.en-US.md
@@ -23,6 +23,14 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### Without Animation
+
+By default, Tabs uses Transform layout to implement switching animation. If other Fixed positioned components (such as Popup, Menu), etc. are used internally, style interference will occur.
+
+You can set `animated-time` to 0. At this time, Tabs will have no switching animation and panel switching will be smoother.
+
+> demo: tabs animated-time
+
 ### Title Align to Left v4.2.7
 
 > demo: tabs left-align
diff --git a/src/packages/__VUE/tabs/doc.md b/src/packages/__VUE/tabs/doc.md
index d142e250ec..2a26d996c9 100644
--- a/src/packages/__VUE/tabs/doc.md
+++ b/src/packages/__VUE/tabs/doc.md
@@ -23,6 +23,14 @@ app.use(TabPane);
 
 > demo: tabs smile
 
+### 无切换动画
+
+默认情况下 Tabs 使用 Transform 布局实现切换动画，如果内部使用了其他 Fixed 定位的组件（比如 Popup、Menu）等，会产生样式干扰。
+
+可以设置 `animated-time` 为 0，此时 Tabs 无切换动画，面板切换更流畅。
+
+> demo: tabs animated-time
+
 ### Title 左对齐 v4.2.7
 
 > demo: tabs left-align
diff --git a/src/packages/__VUE/tabs/doc.taro.md b/src/packages/__VUE/tabs/doc.taro.md
index 4927351df1..6f45af27d0 100644
--- a/src/packages/__VUE/tabs/doc.taro.md
+++ b/src/packages/__VUE/tabs/doc.taro.md
@@ -23,6 +23,14 @@ app.use(TabPane);
 
 > demo: tabs smile nav
 
+### 无切换动画
+
+默认情况下 Tabs 使用 Transform 布局实现切换动画，如果内部使用了其他 Fixed 定位的组件（比如 Popup、Menu）等，会产生样式干扰。
+
+可以设置 `animated-time` 为 0，此时 Tabs 无切换动画，面板切换更流畅。
+
+> demo: tabs animated-time nav
+
 ### Title 左对齐 v4.2.7
 
 > demo: tabs left-align nav