fix(tabs): height transition sometimes not applied when `display-dire…

…ctive="show"` and `:animated="true"`, closes #3035
tusen-ai · Jun 1, 2022 · af0aea4 · af0aea4
1 parent 32c0b37
commit af0aea4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 17 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -19,6 +19,7 @@
 - Fix `n-pagination` has display issue when `:page-count="0"`, closes [#2970](https://github.com/TuSimple/naive-ui/issues/2970).
 - Fix `n-date-picker`'s `shortcuts` will be overrided by `default-time` when `type="datetimerange"`, closes [#3020](https://github.com/TuSimple/naive-ui/issues/3020).
 - Fix `n-image-group` switch pictures doesn't work in SSR mode.
+- Fix `n-tabs`'s height transition sometimes not applied when `display-directive="show"` and `:animated="true"`, closes [#3035](https://github.com/TuSimple/naive-ui/issues/3035).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -19,6 +19,7 @@
 - 修复 `n-pagination` 在 `:page-count="0"` 是显示有问题，关闭 [#2970](https://github.com/TuSimple/naive-ui/issues/2970)
 - 修复 `n-date-picker` 在 `type="datetimerange"` 时 `shortcuts` 会被 `default-time` 覆盖，关闭 [#3020](https://github.com/TuSimple/naive-ui/issues/3020)
 - 修复 `n-image-group` 在 SSR 下无法切换图片
+- 修复 `n-tabs` 在 `display-directive="show"` 和 `:animated="true"` 的时候动画切换高度有时没有过渡，关闭 [#3035](https://github.com/TuSimple/naive-ui/issues/3035)
 
 ### Feats
 

diff --git a/src/tabs/demos/zhCN/animationx-debug.demo.vue b/src/tabs/demos/zhCN/animationx-debug.demo.vue
@@ -5,14 +5,26 @@
   <n-card title="歌曲" style="margin-bottom: 16px">
     <n-tabs type="line" animated>
       <n-tab-pane name="oasis" tab="Oasis" display-directive="show">
-        Wonderwall
-      </n-tab-pane>
-      <n-tab-pane name="the beatles" tab="the Beatles" display-directive="show">
-        Hey Jude
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
+        Wonderwall<br>
       </n-tab-pane>
       <n-tab-pane name="jay chou" tab="周杰伦" display-directive="show">
         七里香
       </n-tab-pane>
+      <n-tab-pane name="the beatles" tab="the Beatles" display-directive="show">
+        Hey Jude<br>
+        Hey Jude<br>
+        Hey Jude<br>
+        Hey Jude<br>
+        Hey Jude<br>
+      </n-tab-pane>
     </n-tabs>
   </n-card>
 </template>

diff --git a/src/tabs/src/Tabs.tsx b/src/tabs/src/Tabs.tsx
@@ -220,25 +220,45 @@ export default defineComponent({
     }
 
     const tabsPaneWrapperRef = ref<HTMLElement | null>(null)
-    let currentHeight = 0
-    function onAnimationBeforeLeave (): void {
+    let fromHeight = 0
+    let hangingTransition: (() => void) | null = null
+    function onAnimationBeforeLeave (el: HTMLElement): void {
       const tabsPaneWrapperEl = tabsPaneWrapperRef.value
       if (tabsPaneWrapperEl) {
-        currentHeight = tabsPaneWrapperEl.getBoundingClientRect().height
-        const currentHeightPx = `${currentHeight}px`
-        tabsPaneWrapperEl.style.height = currentHeightPx
-        tabsPaneWrapperEl.style.maxHeight = currentHeightPx
+        fromHeight = el.getBoundingClientRect().height
+        const fromHeightPx = `${fromHeight}px`
+        const applyFromStyle = (): void => {
+          tabsPaneWrapperEl.style.height = fromHeightPx
+          tabsPaneWrapperEl.style.maxHeight = fromHeightPx
+        }
+        if (!hangingTransition) {
+          hangingTransition = applyFromStyle
+        } else {
+          applyFromStyle()
+          hangingTransition()
+          hangingTransition = null
+        }
       }
     }
     function onAnimationEnter (el: HTMLElement): void {
       const tabsPaneWrapperEl = tabsPaneWrapperRef.value
       if (tabsPaneWrapperEl) {
         const targetHeight = el.getBoundingClientRect().height
-        tabsPaneWrapperEl.style.maxHeight = `${targetHeight}px`
-        tabsPaneWrapperEl.style.height = `${Math.max(
-          currentHeight,
-          targetHeight
-        )}px`
+        const applyTargetStyle = (): void => {
+          void document.body.offsetHeight
+          tabsPaneWrapperEl.style.maxHeight = `${targetHeight}px`
+          tabsPaneWrapperEl.style.height = `${Math.max(
+            fromHeight,
+            targetHeight
+          )}px`
+        }
+        if (!hangingTransition) {
+          hangingTransition = applyTargetStyle
+        } else {
+          hangingTransition()
+          hangingTransition = null
+          applyTargetStyle()
+        }
       }
     }
     function onAnimationAfterEnter (): void {
@@ -778,7 +798,7 @@ function filterMapTabPanes (
   tabPaneVNodes: VNode[],
   value: string | number | null,
   renderedNames: Set<string | number>,
-  onBeforeLeave?: () => void,
+  onBeforeLeave?: (el: HTMLElement) => void,
   onEnter?: (el: HTMLElement) => void,
   onAfterEnter?: () => void,
   animationDirection?: 'next' | 'prev'
@@ -816,7 +836,7 @@ function filterMapTabPanes (
   return (
     <TransitionGroup
       name={`${animationDirection}-transition`}
-      onBeforeLeave={onBeforeLeave}
+      onBeforeLeave={onBeforeLeave as (el: Element) => void}
       onEnter={onEnter as (el: Element) => void}
       onAfterEnter={onAfterEnter}
     >