fix: taro版 折叠面板增加一下动画控制，简化height计算

Author: NJ-Rhys Liu

src/packages/__VUE/collapseitem/collapse-item.taro.vue

@@ -26,14 +26,15 @@
       </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>
     </view>
     <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,16 +154,16 @@ 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(() => {
     wrapperHeight.value = end
     inAnimation.value = false
     if (open) {
       timeoutId.value = setTimeout(() => {
-        wrapperHeight.value = 'auto'
+        wrapperHeight.value = initial
       }, 300)
     }
   }, 100)

src/packages/__VUE/collapseitem/collapse-item.vue

@@ -23,14 +23,15 @@
       </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>
     </view>
     <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 元素

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;