@nutui/nutui-react 3.0.6 → 3.0.8

package/dist/es/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/es/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/es/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/es/packages/avatar/style/style.css

@@ -15,6 +15,10 @@
   border-radius: 50%;
   overflow: hidden;
 }
+.nut-image-basic {
+  width: 100%;
+  height: 100%;
+}
 .nut-image-loading {
   width: 100%;
   height: 100%;

package/dist/es/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/es/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/es/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/es/packages/cascader/cascader.js

@@ -79,6 +79,7 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
                 });
                 next.push({
                     selected: val,
+                    selectedText: opt === null || opt === void 0 ? void 0 : opt.text,
                     pane: currentOptions
                 });
                 pathNodes.current[index] = opt;
@@ -369,7 +370,7 @@ export var Cascader = /*#__PURE__*/ forwardRef(function(props, ref) {
             }
         }, levels.map(function(pane, index) {
             return /*#__PURE__*/ React.createElement(Tabs.TabPane, {
-                title: pane.selected || locale.select,
+                title: pane.selectedText || locale.select,
                 key: index
             }, /*#__PURE__*/ React.createElement("div", {
                 className: classPane

package/dist/es/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/es/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/es/packages/collapseitem/collapseitem.js

@@ -1,10 +1,15 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import React, { useEffect, useContext, useRef, useMemo } from "react";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { ComponentDefaults } from "../../utils/typings";
 import CollapseContext from "../collapse/context";
+import { useRefState } from "../../hooks/use-ref-state";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: null,
     name: '',
@@ -47,57 +52,50 @@ export var CollapseItem = function(props) {
         expanded,
         rotate
     ]);
-    var handleClick = function() {
-        if (!disabled) {
-            context.updateValue(name);
-        }
-    };
-    var onTransitionEnd = function() {
-        if (expanded) {
-            if (wrapperRef.current) {
-                wrapperRef.current.style.height = '';
-            }
-        }
-    };
-    var getOffsetHeight = function() {
-        var _contentRef_current;
-        var height = (_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 ? void 0 : _contentRef_current.offsetHeight;
-        return height ? "".concat(height, "px") : '';
-    };
-    var toggle = function() {
-        var start = expanded ? '0px' : getOffsetHeight();
-        if (wrapperRef.current) {
-            wrapperRef.current.style.height = start;
-        }
-        requestAnimationFrame(function() {
-            requestAnimationFrame(function() {
-                var end = expanded ? getOffsetHeight() : '0px';
-                if (wrapperRef.current) {
-                    wrapperRef.current.style.height = end;
-                }
+    var _useState = _sliced_to_array(useState(0), 2), tran = _useState[0], setTran = _useState[1];
+    var _useRefState = _sliced_to_array(useRefState(0), 2), currentHeight = _useRefState[0], setCurrentHeight = _useRefState[1];
+    var _useState1 = _sliced_to_array(useState(0), 2), wrapperHeight = _useState1[0], setWrapperHeight = _useState1[1];
+    var updateRectHeight = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function() {
+            var height;
+            return _ts_generator(this, function(_state) {
+                height = contentRef.current.offsetHeight;
+                setCurrentHeight(height);
+                setWrapperHeight(expanded ? height : 0);
+                setTimeout(function() {
+                    setTran(1);
+                });
+                return [
+                    2
+                ];
             });
         });
-    };
-    var init = useRef(true);
+        return function updateRectHeight() {
+            return _ref.apply(this, arguments);
+        };
+    }();
     useEffect(function() {
-        if (init.current) {
-            init.current = false;
-            if (!expanded) {
-                wrapperRef.current.style.height = '0px';
-            }
-        } else {
-            toggle();
-        }
+        updateRectHeight();
     }, [
+        children,
         expanded
     ]);
+    var toggle = function() {
+        var end = !expanded ? currentHeight.current : 0;
+        setWrapperHeight(end);
+    };
+    var handleClick = function() {
+        if (!disabled) {
+            context.updateValue(name);
+            toggle();
+        }
+    };
+    var _obj;
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classNames(classPrefix, className),
         style: style
     }, rest), /*#__PURE__*/ React.createElement("div", {
-        className: classNames("".concat(classPrefix, "-header"), {
-            disabled: disabled
-        }),
+        className: classNames("".concat(classPrefix, "-header"), _define_property({}, "".concat(classPrefix, "-header-disabled"), disabled)),
         onClick: handleClick
     }, /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-title")
@@ -109,12 +107,16 @@ export var CollapseItem = function(props) {
         className: "".concat(classPrefix, "-icon"),
         style: iconStyle
     }, expandIcon || context.expandIcon))), /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-content"),
-        onTransitionEnd: onTransitionEnd,
+        className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-content-wrapper"), true), _define_property(_obj, "".concat(classPrefix, "-content-wrapper-tran"), true), _obj)),
+        style: tran ? {
+            height: wrapperHeight
+        } : {},
         ref: wrapperRef
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-content")
     }, /*#__PURE__*/ React.createElement("div", {
         ref: contentRef,
         className: "".concat(classPrefix, "-content-text")
-    }, children)));
+    }, children))));
 };
 CollapseItem.displayName = 'NutCollapseItem';

package/dist/es/packages/collapseitem/style/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,14 +94,26 @@
     }
   }
 
-  &-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;
@@ -105,6 +121,7 @@
     }
   }
 }
+
 [dir='rtl'] .nut-collapse-item,
 .nut-rtl .nut-collapse-item {
   &-icon {

package/dist/es/packages/collapseitem/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));