fix(tabs): has unexpected line animation when nested with n-tabs, c…

…loses #2689
tusen-ai · Mar 30, 2022 · 273a6e0 · 273a6e0
1 parent adf6223
commit 273a6e0
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,6 +2,10 @@
 
 ## NEXT_VERSION
 
+### Fixes
+
+- Fix `n-tabs` has unexpected line animation when nested with `n-tabs`, closes [#2689](https://github.com/TuSimple/naive-ui/issues/2689).
+
 ### Feats
 
 - `n-drawer` adds `on-after-enter` and `on-after-leave` props, closes [#2698](https://github.com/TuSimple/naive-ui/issues/2698).

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,6 +2,10 @@
 
 ## NEXT_VERSION
 
+### Fixes
+
+- 修复 `n-tabs` 中嵌套 `n-tabs`，内部的线条会有一次多余的动画，关闭 [#2689](https://github.com/TuSimple/naive-ui/issues/2689)
+
 ### Feats
 
 - `n-drawer` 新增 `on-after-enter` 和 `on-after-leave` 属性，关闭 [#2698](https://github.com/TuSimple/naive-ui/issues/2698)

diff --git a/src/tabs/demos/zhCN/animation-debug.demo.vue b/src/tabs/demos/zhCN/animation-debug.demo.vue
@@ -0,0 +1,68 @@
+<markdown>
+# Animation debug
+</markdown>
+
+<template>
+  <n-card title="歌曲" style="margin-bottom: 16px">
+    <n-tabs type="card">
+      <n-tab-pane name="oasis" tab="Oasis" display-directive="show:lazy">
+        <n-card>
+          <n-tabs
+            class="card-tabs"
+            default-value="signin"
+            size="large"
+            animated
+            style="margin: 0 -4px"
+            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+          >
+            <n-tab-pane name="signin" tab="登录">
+              <n-form>
+                <n-form-item-row label="用户名">
+                  <n-input />
+                </n-form-item-row>
+                <n-form-item-row label="密码">
+                  <n-input />
+                </n-form-item-row>
+              </n-form>
+              <n-button type="primary" block secondary strong>
+                登录
+              </n-button>
+            </n-tab-pane>
+            <n-tab-pane name="signup" tab="注册">
+              <n-form>
+                <n-form-item-row label="用户名">
+                  <n-input />
+                </n-form-item-row>
+                <n-form-item-row label="密码">
+                  <n-input />
+                </n-form-item-row>
+                <n-form-item-row label="重复密码">
+                  <n-input />
+                </n-form-item-row>
+              </n-form>
+              <n-button type="primary" block secondary strong>
+                注册
+              </n-button>
+            </n-tab-pane>
+          </n-tabs>
+        </n-card>
+      </n-tab-pane>
+      <n-tab-pane
+        name="the beatles"
+        tab="the Beatles"
+        display-directive="show:lazy"
+      >
+        Hey Jude
+      </n-tab-pane>
+      <n-tab-pane name="jay chou" tab="周杰伦" display-directive="show:lazy">
+        七里香
+      </n-tab-pane>
+    </n-tabs>
+  </n-card>
+</template>
+
+<style>
+.card-tabs .n-tabs-nav--bar-type {
+  padding-left: 4px;
+}
+</style>
diff --git a/src/tabs/demos/zhCN/index.demo-entry.md b/src/tabs/demos/zhCN/index.demo-entry.md
@@ -23,6 +23,7 @@ style-inherit-debug.vue
 shadow-debug.vue
 unkeyed-debug.vue
 addable-debug.vue
+animation-debug.vue
 ```
 
 ## API

diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx
@@ -285,7 +285,17 @@ export default defineComponent({
     }
 
     let firstTimeUpdatePosition = true
-    const handleNavResize = throttle(function handleNavResize () {
+    let memorizedWidth = 0
+    const handleNavResize = throttle(function handleNavResize (
+      entry: ResizeObserverEntry
+    ) {
+      if (entry.contentRect.width === 0 && entry.contentRect.height === 0) {
+        return
+      }
+      if (memorizedWidth === entry.contentRect.width) {
+        return
+      }
+      memorizedWidth = entry.contentRect.width
       const { type } = props
       if (
         (type === 'line' || type === 'bar') &&
@@ -304,7 +314,8 @@ export default defineComponent({
       if (type !== 'segment') {
         deriveScrollShadow(xScrollInstRef.value?.$el)
       }
-    }, 64)
+    },
+    64)
 
     const addTabFixedRef = ref(false)
     function _handleTabsResize (entry: ResizeObserverEntry): void {