@nutui/nutui-react-taro 3.0.6 → 3.0.7

package/CHANGELOG.md

@@ -1,21 +1,40 @@
+# v3.0.7
+`2025-04-03`
+
+
+* :sparkles: feat(jdesign): 修订变量名 (#3127)
+* :sparkles: feat(collapse): 适配鸿蒙 (#3139)
+* :bug: fix(tabs): 兼容16的处理 (#3150)
+* :bug: fix(dialog)：修复函数式调用时 hidecancel 不生效问题 (#3145)
+* :bug: fix(button): 样式变量无法生效问题修复 (#3142)
+* :bug: fix(Popup): 调整最小高度设定为 26% (#3144)
+* :bug: fix: popover 无法关闭的问题,删除无用代码和无用的样式变量 (#3129)
+* :bug: fix: contribution img failed to display (#3141)
+* :bug: fix(switch): 简化props使用 (#3132)
+* :bug: fix: tabbar config json (#3134)
+* 🪵 refactor(dialog): 抽离types到标准spec下，去掉web h5 wrap层 (#3147)
+* 🏡 chore:  修复正式环境的 publicPath (#3137)
+
+
 # v3.0.6
+
 `2025-03-28`
 
-* :sparkles: feat(skeleton): v15 (#3086)
-* :sparkles: feat(Tabbar): v15 样式适配；增加 icon/value/title 的function类型，支持根据active状态渲染不同数据；增加 onDoubleClick 事件 (#3110)
-* :sparkles: feat(indicator): 增加 UI 变体的类型 (#3114)
-* :sparkles: feat(switch): 异步切换支持受控loading态 (#3122)
-* :sparkles: feat(notify): v15 (#3082)
-* :sparkles: feat(lottie): 支持京东小程序 (#3080)
-* :sparkles: feat(demoblock): code block scrolling behavior， CodesandBox function and copyCode styles (#3106)
-* :bug: fix(searchbar): 支付宝小程序设置 enableInPageRenderInput 后无法触发 onChange (#3130)
-* :bug: fix: doc css (#3126)
-* :bug: fix(overlay): 扩大点击范围 (#3117)
-* :bug: fix(pickerview): 解决小程序获取高度计算错误 (#3120)
-* :bug: fix(badge): 修正css变量定义 (#3123)
-* :bug: fix: update pkgjson title (#3119)
-* 🪵 refactor(badge): 支持禁用模式 (#3118)
-* 🏡 chore: support ui review (#3121)
+- :sparkles: feat(skeleton): v15 (#3086)
+- :sparkles: feat(Tabbar): v15 样式适配；增加 icon/value/title 的function类型，支持根据active状态渲染不同数据；增加 onDoubleClick 事件 (#3110)
+- :sparkles: feat(indicator): 增加 UI 变体的类型 (#3114)
+- :sparkles: feat(switch): 异步切换支持受控loading态 (#3122)
+- :sparkles: feat(notify): v15 (#3082)
+- :sparkles: feat(lottie): 支持京东小程序 (#3080)
+- :sparkles: feat(demoblock): code block scrolling behavior， CodesandBox function and copyCode styles (#3106)
+- :bug: fix(searchbar): 支付宝小程序设置 enableInPageRenderInput 后无法触发 onChange (#3130)
+- :bug: fix: doc css (#3126)
+- :bug: fix(overlay): 扩大点击范围 (#3117)
+- :bug: fix(pickerview): 解决小程序获取高度计算错误 (#3120)
+- :bug: fix(badge): 修正css变量定义 (#3123)
+- :bug: fix: update pkgjson title (#3119)
+- 🪵 refactor(badge): 支持禁用模式 (#3118)
+- 🏡 chore: support ui review (#3121)
 
 # v3.0.5
 

package/dist/cjs/packages/actionsheet/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/address/style/style.css

@@ -178,7 +178,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -316,12 +316,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -448,7 +448,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/audio/style/style.css

@@ -94,18 +94,6 @@
 .nut-button-round {
   border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
 }
-.nut-button-round-xlarge {
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
-}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -131,7 +119,7 @@
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -151,7 +139,7 @@
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -171,7 +159,7 @@
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +173,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));

package/dist/cjs/packages/button/style/button.scss

@@ -101,22 +101,6 @@
 
   &-round {
     border-radius: $button-border-radius;
-
-    &-xlarge {
-      border-radius: $button-xlarge-border-radius;
-    }
-
-    &-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &-mini {
-      border-radius: $button-mini-border-radius;
-    }
   }
 
   &-default {
@@ -155,7 +139,7 @@
     height: $button-xlarge-height;
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
-    border-radius: $radius-base;
+    border-radius: $button-xlarge-border-radius;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -178,7 +162,7 @@
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
-    border-radius: $radius-s;
+    border-radius: $button-large-border-radius;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -202,7 +186,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
-    border-radius: $radius-xs;
+    border-radius: $button-small-border-radius;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -219,7 +203,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
-    border-radius: $radius-xs;
+    border-radius: $button-mini-border-radius;
 
     .nut-icon {
       font-size: $button-mini-font-size;

package/dist/cjs/packages/button/style/style.css

@@ -94,18 +94,6 @@
 .nut-button-round {
   border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
 }
-.nut-button-round-xlarge {
-  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
-}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -131,7 +119,7 @@
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -151,7 +139,7 @@
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8px));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -171,7 +159,7 @@
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +173,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-xs, 4px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));

package/dist/cjs/packages/button/style/style.harmony.css

@@ -94,18 +94,6 @@
 .nut-button-round {
   border-radius: 6px;
 }
-.nut-button-round-xlarge {
-  border-radius: 8px;
-}
-.nut-button-round-large {
-  border-radius: 8px;
-}
-.nut-button-round-small {
-  border-radius: 6px;
-}
-.nut-button-round-mini {
-  border-radius: 4px;
-}
 .nut-button-default {
   padding: 0px 12px;
   border-style: solid;
@@ -161,7 +149,7 @@
   height: 40px;
   padding: 0px 16px;
   font-size: 16px;
-  border-radius: 6px;
+  border-radius: 8px;
 }
 .nut-button-large .nut-button-text {
   margin-left: 6px;
@@ -181,7 +169,7 @@
   height: 28px;
   padding: 0px 8px;
   font-size: 12px;
-  border-radius: 4px;
+  border-radius: 6px;
 }
 .nut-button-small .nut-icon {
   font-size: 12px;

package/dist/cjs/packages/calendar/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/cascader/style/style.css

@@ -60,7 +60,7 @@
 
 .nut-popup {
   position: fixed;
-  min-height: 46%;
+  min-height: 26%;
   max-height: 100%;
   background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
     transform: scale(0.8);
   }
 }
-.nut-popup-slide-default-enter-active {
+.nut-popup-slide-none-enter-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-in;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-active {
+.nut-popup-slide-none-exit-active {
   animation-fill-mode: both;
   animation-name: popup-scale-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
   animation-name: popup-slide-left-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
-.nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
+.nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
   display: none;
 }
 .nut-popup .nut-overflow-hidden {

package/dist/cjs/packages/collapse/style/style.css

@@ -40,8 +40,12 @@
   left: 16px;
   bottom: 0;
   border-bottom: var(--nutui-collapse-item-header-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  -webkit-transform: scaleY(0.5);
-  transform: scaleY(0.5);
+  /* #ifdef harmony */
+  transform: scale(1, 1);
+  /* #endif */
+  /* #ifndef harmony */
+  transform: scale(1, 0.5);
+  /* #endif */
 }
 .nut-collapse-item-title {
   color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a));
@@ -74,23 +78,34 @@
   transform-origin: center;
   transition: transform 0.3s;
 }
-.nut-collapse-item-header.disabled {
+.nut-collapse-item-header-disabled {
   color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
-.nut-collapse-item-header.disabled .nut-collapse-item-title {
+.nut-collapse-item-header-disabled .nut-collapse-item-title {
   color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
-.nut-collapse-item-header.disabled .nut-collapse-item-icon {
+.nut-collapse-item-header-disabled .nut-collapse-item-icon {
   color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
-.nut-collapse-item-content {
+.nut-collapse-item-content-wrapper {
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
   overflow: hidden;
+}
+.nut-collapse-item-content-wrapper-tran {
+  transition: all 0.3s linear;
+}
+.nut-collapse-item-content {
   display: block;
+  position: absolute;
+  height: auto;
+  width: 100%;
+  box-sizing: border-box;
   color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-collapse-wrapper-content-font-size, var(--nutui-font-size-base, 14px));
   line-height: var(--nutui-collapse-wrapper-content-line-height, 1.5);
   background-color: var(--nutui-collapse-wrapper-content-background-color, var(--nutui-color-background-overlay, #ffffff));
-  transition: all 0.3s linear;
 }
 .nut-collapse-item-content-text {
   color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259));

package/dist/cjs/packages/collapseitem/collapseitem.js

@@ -10,16 +10,22 @@ Object.defineProperty(exports, "CollapseItem", {
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+var _define_property = require("@swc/helpers/_/_define_property");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _components = require("@tarojs/components");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _taro = require("@tarojs/taro");
 var _typings = require("../../utils/typings");
 var _context = /*#__PURE__*/ _interop_require_default._(require("../collapse/context"));
+var _getrectbytaro = require("../../utils/get-rect-by-taro");
+var _useuuid = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-uuid"));
+var _userefstate = require("../../hooks/use-ref-state");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: null,
     name: '',
@@ -43,10 +49,8 @@ var CollapseItem = function CollapseItem(props) {
     var context = (0, _react.useContext)(_context.default);
     var wrapperRef = (0, _react.useRef)(null);
     var contentRef = (0, _react.useRef)(null);
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
-        return Math.random().toString(36).slice(-8);
-    }), 1), refRandomId = _useState[0];
-    var target = "#nut-collapse-content-".concat(refRandomId);
+    var uid = (0, _useuuid.default)();
+    var target = "nut-collapse-content-".concat(uid);
     var expanded = (0, _react.useMemo)(function() {
         if (context) {
             return context.isOpen(name);
@@ -66,83 +70,64 @@ var CollapseItem = function CollapseItem(props) {
         expanded,
         rotate
     ]);
-    var handleClick = function handleClick() {
-        if (!disabled) {
-            context.updateValue(name);
-        }
-    };
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), timer = _useState1[0], setTimer = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)('auto'), 2), currentHeight = _useState2[0], setCurrentHeight = _useState2[1];
-    var inAnimation = (0, _react.useRef)(false);
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(function() {
-        return expanded ? 'auto' : '0px';
-    }), 2), wrapperHeight = _useState3[0], setWrapperHeight = _useState3[1];
-    var getRect = function getRect(selector) {
-        return new Promise(function(resolve) {
-            (0, _taro.createSelectorQuery)().select(selector).boundingClientRect().exec(function() {
-                var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-                resolve(rect[0]);
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(0), 2), tran = _useState[0], setTran = _useState[1];
+    var _useRefState = (0, _sliced_to_array._)((0, _userefstate.useRefState)(0), 2), currentHeight = _useRefState[0], setCurrentHeight = _useRefState[1];
+    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), wrapperHeight = _useState1[0], setWrapperHeight = _useState1[1];
+    var updateRectHeight = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function() {
+            var res;
+            return (0, _ts_generator._)(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            (0, _getrectbytaro.getRectByTaro)(contentRef.current, target)
+                        ];
+                    case 1:
+                        res = _state.sent();
+                        if (res === null || res === void 0 ? void 0 : res.height) {
+                            setCurrentHeight(res.height);
+                            setWrapperHeight(expanded ? res.height : 0);
+                            (0, _taro.nextTick)(function() {
+                                setTran(1);
+                            });
+                        }
+                        return [
+                            2
+                        ];
+                }
             });
         });
-    };
+        return function updateRectHeight() {
+            return _ref.apply(this, arguments);
+        };
+    }();
     (0, _react.useEffect)(function() {
-        setTimeout(function() {
-            getRect(target).then(function(res) {
-                if (res === null || res === void 0 ? void 0 : res.height) {
-                    setCurrentHeight("".concat(res.height, "px"));
-                }
-            });
-        }, 200);
+        (0, _taro.nextTick)(function() {
+            updateRectHeight();
+        });
     }, [
-        children
+        children,
+        expanded
     ]);
-    (0, _react.useEffect)(function() {
-        setTimeout(function() {
-            getRect(target).then(function(res) {
-                if (res === null || res === void 0 ? void 0 : res.height) {
-                    setCurrentHeight("".concat(res.height, "px"));
-                }
-            });
-        }, 100);
-    }, []);
     var toggle = function toggle() {
-        // 连续切换状态时，清除打开的后续操作
-        if (timer) {
-            clearTimeout(timer);
-            setTimer(timer);
-        }
-        var start = expanded ? '0px' : currentHeight;
-        var end = expanded ? currentHeight : '0px';
-        inAnimation.current = true;
-        setWrapperHeight(start);
-        setTimeout(function() {
-            setWrapperHeight(end);
-            inAnimation.current = false;
-            if (expanded) {
-                var timer = setTimeout(function() {
-                    setWrapperHeight('auto');
-                }, 300);
-                setTimer(timer);
-            }
-        }, 100);
+        var end = !expanded ? currentHeight.current : 0;
+        setWrapperHeight(end);
     };
-    var init = (0, _react.useRef)(true);
-    (0, _react.useEffect)(function() {
-        if (init.current) {
-            init.current = false;
-        } else {
-            toggle();
+    var handleClick = function handleClick() {
+        if (!disabled) {
+            context.updateValue(name);
+            setTimeout(function() {
+                toggle();
+            }, 150);
         }
-    }, [
-        expanded
-    ]);
+    };
+    var _obj;
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: (0, _classnames.default)(classPrefix, className),
         style: style
     }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: (0, _classnames.default)("".concat(classPrefix, "-header"), {
-            disabled: disabled
-        }),
+        className: (0, _classnames.default)("".concat(classPrefix, "-header"), (0, _define_property._)({}, "".concat(classPrefix, "-header-disabled"), disabled)),
         onClick: handleClick
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-title")
@@ -154,16 +139,17 @@ var CollapseItem = function CollapseItem(props) {
         className: "".concat(classPrefix, "-icon"),
         style: iconStyle
     }, expandIcon || context.expandIcon))), /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "".concat(classPrefix, "-content"),
-        ref: wrapperRef,
-        style: {
-            willChange: 'height',
+        className: (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-content-wrapper"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-content-wrapper-tran"), true), _obj)),
+        style: tran ? {
             height: wrapperHeight
-        }
+        } : {},
+        ref: wrapperRef
     }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-content"),
         ref: contentRef,
-        className: "".concat(classPrefix, "-content-text"),
-        id: "nut-collapse-content-".concat(refRandomId)
-    }, children)));
+        id: target
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
+        className: "".concat(classPrefix, "-content-text")
+    }, children))));
 };
 CollapseItem.displayName = 'NutCollapseItem';