jdf2e · xiaoyatong · Apr 2, 2025 · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/src/config.json b/src/config.json
@@ -1127,29 +1127,29 @@
           "dd": false
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Collapse",
           "type": "component",
           "cName": "折叠面板",
           "desc": "折叠面板，可进行内容折叠展开操作，可以多面板配合使用。",
           "sort": 2,
           "show": true,
           "taro": true,
-          "v15": -1,
-          "author": "zhenyulei",
-          "dd": false
+          "v15": 1,
+          "author": "oasis",
+          "dd": true
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "CollapseItem",
           "type": "component",
           "cName": "折叠面板子组件",
           "desc": "折叠面板的子组件",
           "sort": 13,
           "show": false,
           "exportEmpty": true,
-          "author": "zhenyulei",
-          "dd": false
+          "author": "oasis",
+          "dd": true
         },
         {
           "version": "3.0.0",

diff --git a/src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap b/src/packages/collapse/__test__/__snapshots__/collapse.spec.tsx.snap
@@ -42,12 +42,16 @@ exports[`should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="nut-collapse-item-content"
+        class="nut-collapse-item-content-wrapper nut-collapse-item-content-wrapper-tran"
       >
         <div
-          class="nut-collapse-item-content-text"
+          class="nut-collapse-item-content"
         >
-          京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          <div
+            class="nut-collapse-item-content-text"
+          >
+            京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          </div>
         </div>
       </div>
     </div>
@@ -88,20 +92,24 @@ exports[`should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="nut-collapse-item-content"
+        class="nut-collapse-item-content-wrapper nut-collapse-item-content-wrapper-tran"
       >
         <div
-          class="nut-collapse-item-content-text"
+          class="nut-collapse-item-content"
         >
-          京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          <div
+            class="nut-collapse-item-content-text"
+          >
+            京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+          </div>
         </div>
       </div>
     </div>
     <div
       class="nut-collapse-item"
     >
       <div
-        class="nut-collapse-item-header disabled"
+        class="nut-collapse-item-header nut-collapse-item-header-disabled"
       >
         <div
           class="nut-collapse-item-title"
@@ -134,13 +142,16 @@ exports[`should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="nut-collapse-item-content"
-        style="height: 0px;"
+        class="nut-collapse-item-content-wrapper nut-collapse-item-content-wrapper-tran"
       >
         <div
-          class="nut-collapse-item-content-text"
+          class="nut-collapse-item-content"
         >
-          京东“厂直优品计划”首推“政府优品馆”
+          <div
+            class="nut-collapse-item-content-text"
+          >
+            京东“厂直优品计划”首推“政府优品馆”
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/packages/collapse/__test__/collapse.spec.tsx b/src/packages/collapse/__test__/collapse.spec.tsx
@@ -63,10 +63,13 @@ test('prop activeName', async () => {
       </Collapse>
     </>
   )
-
-  expect(
-    container.querySelectorAll('.nut-collapse-item-content')[2]
-  ).toHaveStyle('height:0px')
+  waitFor(() => {
+    expect(
+      container.querySelectorAll('.nut-collapse-item-content-wrapper')[2]
+    ).toHaveStyle({
+      height: '0',
+    })
+  })
 })
 
 test('prop rotate', async () => {

diff --git a/src/packages/collapseitem/collapseitem.scss b/src/packages/collapseitem/collapseitem.scss
@@ -38,8 +38,12 @@
       left: 16px;
       bottom: 0;
       border-bottom: $collapse-item-header-border-bottom;
-      -webkit-transform: scaleY(0.5);
-      transform: scaleY(0.5);
+      /* #ifdef harmony */
+      transform: scale(1, 1);
+      /* #endif */
+      /* #ifndef harmony */
+      transform: scale(1, 0.5);
+      /* #endif */
     }
   }
 
@@ -78,7 +82,7 @@
     transition: transform 0.3s;
   }
 
-  &-header.disabled {
+  &-header-disabled {
     color: $collapse-item-disabled-color;
 
     .nut-collapse-item-title {
@@ -90,21 +94,34 @@
     }
   }
 
-  &-content {
+  &-content-wrapper {
+    width: 100%;
+    position: relative;
+    box-sizing: border-box;
     overflow: hidden;
+    &-tran {
+      transition: all 0.3s linear;
+    }
+  }
+
+  &-content {
     display: block;
+    position: absolute;
+    height: auto;
+    width: 100%;
+    box-sizing: border-box;
     color: $collapse-wrapper-content-color;
     font-size: $collapse-wrapper-content-font-size;
     line-height: $collapse-wrapper-content-line-height;
     background-color: $collapse-wrapper-content-background-color;
-    transition: all 0.3s linear;
 
     &-text {
       color: $collapse-wrapper-content-color;
       padding: $collapse-wrapper-content-padding;
     }
   }
 }
+
 [dir='rtl'] .nut-collapse-item,
 .nut-rtl .nut-collapse-item {
   &-icon {

diff --git a/src/packages/collapseitem/collapseitem.taro.tsx b/src/packages/collapseitem/collapseitem.taro.tsx
@@ -1,17 +1,20 @@
 import React, {
   FunctionComponent,
-  useEffect,
-  useState,
   ReactNode,
   useContext,
-  useRef,
+  useEffect,
   useMemo,
+  useRef,
+  useState,
 } from 'react'
 import { View } from '@tarojs/components'
 import classNames from 'classnames'
-import { createSelectorQuery } from '@tarojs/taro'
+import { nextTick } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import CollapseContext from '../collapse/context'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
+import useUuid from '@/hooks/use-uuid'
+import { useRefState } from '@/hooks/use-ref-state'
 
 export interface CollapseItemProps extends BasicComponent {
   title: ReactNode
@@ -54,8 +57,8 @@ export const CollapseItem: FunctionComponent<
   const context = useContext(CollapseContext)
   const wrapperRef: any = useRef(null)
   const contentRef: any = useRef(null)
-  const [refRandomId] = useState(() => Math.random().toString(36).slice(-8))
-  const target = `#nut-collapse-content-${refRandomId}`
+  const uid = useUuid()
+  const target = `nut-collapse-content-${uid}`
 
   const expanded = useMemo(() => {
     if (context) {
@@ -70,86 +73,45 @@ export const CollapseItem: FunctionComponent<
       : { transform: 'translateY(-50%)' }
   }, [expanded, rotate])
 
-  const handleClick = () => {
-    if (!disabled) {
-      context.updateValue(name)
-    }
-  }
-
-  const [timer, setTimer] = useState<any>(null)
-  const [currentHeight, setCurrentHeight] = useState<string>('auto')
-  const inAnimation = useRef(false)
-  const [wrapperHeight, setWrapperHeight] = useState(() =>
-    expanded ? 'auto' : '0px'
-  )
+  const [tran, setTran] = useState(0)
+  const [currentHeight, setCurrentHeight] = useRefState(0)
+  const [wrapperHeight, setWrapperHeight] = useState(0)
 
-  const getRect = (selector: string) => {
-    return new Promise((resolve) => {
-      createSelectorQuery()
-        .select(selector)
-        .boundingClientRect()
-        .exec((rect = []) => {
-          resolve(rect[0])
-        })
-    })
-  }
-
-  useEffect(() => {
-    setTimeout(() => {
-      getRect(target).then((res: any) => {
-        if (res?.height) {
-          setCurrentHeight(`${res.height}px`)
-        }
+  const updateRectHeight = async () => {
+    const res = await getRectByTaro(contentRef.current, target)
+    if (res?.height) {
+      setCurrentHeight(res.height)
+      setWrapperHeight(expanded ? res.height : 0)
+      nextTick(() => {
+        setTran(1)
       })
-    }, 200)
-  }, [children])
-
+    }
+  }
   useEffect(() => {
-    setTimeout(() => {
-      getRect(target).then((res: any) => {
-        if (res?.height) {
-          setCurrentHeight(`${res.height}px`)
-        }
-      })
-    }, 100)
-  }, [])
+    nextTick(() => {
+      updateRectHeight()
+    })
+  }, [children, expanded])
 
   const toggle = () => {
-    // 连续切换状态时，清除打开的后续操作
-    if (timer) {
-      clearTimeout(timer)
-      setTimer(timer)
-    }
-    const start = expanded ? '0px' : currentHeight
-    const end = expanded ? currentHeight : '0px'
-    inAnimation.current = true
-    setWrapperHeight(start)
-    setTimeout(() => {
-      setWrapperHeight(end)
-      inAnimation.current = false
-      if (expanded) {
-        const timer = setTimeout(() => {
-          setWrapperHeight('auto')
-        }, 300)
-        setTimer(timer)
-      }
-    }, 100)
+    const end = !expanded ? currentHeight.current : 0
+    setWrapperHeight(end)
   }
-
-  const init = useRef(true)
-
-  useEffect(() => {
-    if (init.current) {
-      init.current = false
-    } else {
-      toggle()
+  const handleClick = () => {
+    if (!disabled) {
+      context.updateValue(name)
+      setTimeout(() => {
+        toggle()
+      }, 150)
     }
-  }, [expanded])
+  }
 
   return (
     <div className={classNames(classPrefix, className)} style={style} {...rest}>
       <View
-        className={classNames(`${classPrefix}-header`, { disabled })}
+        className={classNames(`${classPrefix}-header`, {
+          [`${classPrefix}-header-disabled`]: disabled,
+        })}
         onClick={handleClick}
       >
         <View className={`${classPrefix}-title`}>{title}</View>
@@ -161,19 +123,21 @@ export const CollapseItem: FunctionComponent<
         </View>
       </View>
       <View
-        className={`${classPrefix}-content`}
+        className={classNames({
+          [`${classPrefix}-content-wrapper`]: true,
+          [`${classPrefix}-content-wrapper-tran`]: true,
+        })}
+        style={
+          tran
+            ? {
+                height: wrapperHeight,
+              }
+            : {}
+        }
         ref={wrapperRef}
-        style={{
-          willChange: 'height',
-          height: wrapperHeight,
-        }}
       >
-        <View
-          ref={contentRef}
-          className={`${classPrefix}-content-text`}
-          id={`nut-collapse-content-${refRandomId}`}
-        >
-          {children}
+        <View className={`${classPrefix}-content`} ref={contentRef} id={target}>
+          <View className={`${classPrefix}-content-text`}>{children}</View>
         </View>
       </View>
     </div>