From 833b264761302201905d5d9e7585c81aedf99594 Mon Sep 17 00:00:00 2001
From: NJ-Rhys Liu <1025651502@qq.com>
Date: Mon, 17 Jun 2024 18:19:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20taro=E7=89=88=20=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=8B=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB=E6=8E=A7=E5=88=B6=EF=BC=8C=E7=AE=80=E5=8C=96height?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__VUE/collapseitem/collapse-item.taro.vue    | 16 ++++++++++------
 .../__VUE/collapseitem/collapse-item.vue         |  7 +++++--
 src/packages/__VUE/collapseitem/index.scss       |  4 +++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/packages/__VUE/collapseitem/collapse-item.taro.vue b/src/packages/__VUE/collapseitem/collapse-item.taro.vue
index b9cab7f51f..eee697949d 100644
--- a/src/packages/__VUE/collapseitem/collapse-item.taro.vue
+++ b/src/packages/__VUE/collapseitem/collapse-item.taro.vue
@@ -26,7 +26,7 @@
       </view>
     </view>
 
-    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
+    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper" :class="{ transition: transition }">
       <div class="nut-collapse__item-extraWrapper__extraRender">
         <slot name="extra"></slot>
       </div>
@@ -34,6 +34,7 @@
     <view
       ref="wrapperRef"
       class="nut-collapse__item-wrapper"
+      :class="{ transition: transition }"
       :style="{
         willChange: 'height',
         height: wrapperHeight
@@ -65,6 +66,7 @@ export type CollapseItemProps = Partial<{
   border: boolean
   icon: any
   rotate: string | number
+  transition: boolean
 }>
 
 const props = withDefaults(defineProps<CollapseItemProps>(), {
@@ -75,7 +77,8 @@ const props = withDefaults(defineProps<CollapseItemProps>(), {
   name: -1,
   border: true,
   icon: () => DownArrow,
-  rotate: 180
+  rotate: 180,
+  transition: true
 })
 
 const slots = useSlots()
@@ -136,7 +139,8 @@ const expanded = computed(() => {
   return false
 })
 
-const wrapperHeight = ref(expanded.value ? 'auto' : '0px')
+const initial = 'initial'
+const wrapperHeight = ref(expanded.value ? initial : '0px')
 
 const handleClick = () => {
   if (!inAnimation.value) {
@@ -150,8 +154,8 @@ const toggle = (open: boolean) => {
     clearTimeout(timeoutId.value)
     timeoutId.value = ''
   }
-  const start = open ? '0px' : currentHeight.value
-  const end = open ? currentHeight.value : '0px'
+  const start = open ? '0px' : initial
+  const end = open ? initial : '0px'
   inAnimation.value = true
   wrapperHeight.value = start
   setTimeout(() => {
@@ -159,7 +163,7 @@ const toggle = (open: boolean) => {
     inAnimation.value = false
     if (open) {
       timeoutId.value = setTimeout(() => {
-        wrapperHeight.value = 'auto'
+        wrapperHeight.value = initial
       }, 300)
     }
   }, 100)
diff --git a/src/packages/__VUE/collapseitem/collapse-item.vue b/src/packages/__VUE/collapseitem/collapse-item.vue
index 4198e4f7a6..5e4c071f0f 100644
--- a/src/packages/__VUE/collapseitem/collapse-item.vue
+++ b/src/packages/__VUE/collapseitem/collapse-item.vue
@@ -23,7 +23,7 @@
       </view>
     </view>
 
-    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper">
+    <view v-if="$slots.extra" class="nut-collapse__item-extraWrapper" :class="{ transition: transition }">
       <div class="nut-collapse__item-extraWrapper__extraRender">
         <slot name="extra"></slot>
       </div>
@@ -31,6 +31,7 @@
     <view
       ref="wrapperRef"
       class="nut-collapse__item-wrapper"
+      :class="{ transition: transition }"
       :style="{
         willChange: 'height',
         height: wrapperHeight
@@ -62,6 +63,7 @@ export type CollapseItemProps = Partial<{
   border: boolean
   icon: any
   rotate: string | number
+  transition: boolean
 }>
 
 const props = withDefaults(defineProps<CollapseItemProps>(), {
@@ -72,7 +74,8 @@ const props = withDefaults(defineProps<CollapseItemProps>(), {
   name: -1,
   border: true,
   icon: () => DownArrow,
-  rotate: 180
+  rotate: 180,
+  transition: true
 })
 
 // 获取 DOM 元素
diff --git a/src/packages/__VUE/collapseitem/index.scss b/src/packages/__VUE/collapseitem/index.scss
index 051b7d7051..1e44935355 100644
--- a/src/packages/__VUE/collapseitem/index.scss
+++ b/src/packages/__VUE/collapseitem/index.scss
@@ -91,7 +91,9 @@
     position: relative;
     height: 0;
     overflow: hidden;
-    transition: height 0.3s ease-in-out;
+    &.transition {
+      transition: height 0.3s ease-in-out;
+    }
     .nut-collapse__item-wrapper__content,
     .nut-collapse__item-extraWrapper__extraRender {
       display: block;