From d0c44817cac84404e70ebfe140a81dffd6f8cc56 Mon Sep 17 00:00:00 2001
From: liwenbo <liwenbo@kanzhun.com>
Date: Fri, 19 Jul 2024 13:46:18 +0800
Subject: [PATCH] fix: fix tree node folding animation

---
 packages/web-vue/components/tree/expand-transition.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-vue/components/tree/expand-transition.vue b/packages/web-vue/components/tree/expand-transition.vue
index 161e8d1c3..b2a84cba8 100644
--- a/packages/web-vue/components/tree/expand-transition.vue
+++ b/packages/web-vue/components/tree/expand-transition.vue
@@ -1,6 +1,5 @@
 <template>
   <transition
-    @before-enter="onBeforeEnter"
     @enter="onEnter"
     @after-enter="onAfterEnter"
     @before-leave="onBeforeLeave"
@@ -20,11 +19,12 @@ export default defineComponent({
   emits: ['end'],
   setup(props, { emit }) {
     return {
-      onBeforeEnter(el: HTMLDivElement) {
-        el.style.height = props.expanded ? '0' : `${el.scrollHeight}px`;
-      },
       onEnter(el: HTMLDivElement) {
-        el.style.height = props.expanded ? `${el.scrollHeight}px` : '0';
+        const endHeight = `${el.scrollHeight}px`;
+        el.style.height = props.expanded ? '0' : endHeight;
+        // eslint-disable-next-line no-unused-expressions
+        el.offsetHeight;
+        el.style.height = props.expanded ? endHeight : '0';
       },
       onAfterEnter(el: HTMLDivElement) {
         el.style.height = props.expanded ? '' : '0';