@sheinx/hooks 3.9.2-beta.1 → 3.9.2-beta.3

package/cjs/common/use-collapse-animation/use-collapse-animation.d.ts

@@ -19,6 +19,21 @@ export interface UseCollapseAnimationOptions {
      * @default 'cubic-bezier(.2,0,0,1)'
      */
     timingFunction?: string;
+    /**
+     * 父元素的 open class 名称
+     * 用于在获取 scrollHeight 时临时添加,确保用户依赖此 class 的样式生效
+     */
+    parentOpenClassName?: string;
+}
+export interface UseCollapseAnimationResult {
+    /**
+     * 是否应该隐藏元素(动画结束后且 isOpen 为 false 时返回 true)
+     */
+    shouldHide: boolean;
+    /**
+     * 是否应该保持 open 状态(动画进行中时返回 true)
+     */
+    shouldKeepOpen: boolean;
 }
 /**
  * 为元素添加折叠/展开动画的 Hook
@@ -26,10 +41,11 @@ export interface UseCollapseAnimationOptions {
  * @example
  * ```tsx
  * const ref = useRef<HTMLDivElement>(null);
- * useCollapseAnimation(ref, { isOpen: true });
+ * const { shouldHide, shouldKeepOpen } = useCollapseAnimation(ref, { isOpen: true });
  *
- * return <div ref={ref}>Content</div>;
+ * return <div ref={ref} className={shouldHide ? 'hide' : ''}>Content</div>;
  * ```
+ * @returns 动画状态对象
  */
-export declare function useCollapseAnimation<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>, options: UseCollapseAnimationOptions): void;
+export declare function useCollapseAnimation<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>, options: UseCollapseAnimationOptions): UseCollapseAnimationResult;
 //# sourceMappingURL=use-collapse-animation.d.ts.map

package/cjs/common/use-collapse-animation/use-collapse-animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-collapse-animation.d.ts","sourceRoot":"","sources":["use-collapse-animation.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,OAAO,EAAE,2BAA2B,QAwFrC"}
+{"version":3,"file":"use-collapse-animation.d.ts","sourceRoot":"","sources":["use-collapse-animation.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,OAAO,EAAE,2BAA2B,GACnC,0BAA0B,CAoI5B"}

package/cjs/common/use-collapse-animation/use-collapse-animation.js

@@ -5,16 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCollapseAnimation = useCollapseAnimation;
 var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * 为元素添加折叠/展开动画的 Hook
  *
  * @example
  * ```tsx
  * const ref = useRef<HTMLDivElement>(null);
- * useCollapseAnimation(ref, { isOpen: true });
+ * const { shouldHide, shouldKeepOpen } = useCollapseAnimation(ref, { isOpen: true });
  *
- * return <div ref={ref}>Content</div>;
+ * return <div ref={ref} className={shouldHide ? 'hide' : ''}>Content</div>;
  * ```
+ * @returns 动画状态对象
  */
 function useCollapseAnimation(elementRef, options) {
   var isOpen = options.isOpen,
@@ -23,8 +30,17 @@ function useCollapseAnimation(elementRef, options) {
     _options$disabled = options.disabled,
     disabled = _options$disabled === void 0 ? false : _options$disabled,
     _options$timingFuncti = options.timingFunction,
-    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti;
+    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti,
+    parentOpenClassName = options.parentOpenClassName;
   var isFirstRenderRef = (0, _react.useRef)(true);
+  var _useState = (0, _react.useState)(!isOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldHide = _useState2[0],
+    setShouldHide = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAnimating = _useState4[0],
+    setIsAnimating = _useState4[1];
 
   // 当 disabled 状态变化时，重置首次渲染标记
   (0, _react.useEffect)(function () {
@@ -32,6 +48,8 @@ function useCollapseAnimation(elementRef, options) {
       isFirstRenderRef.current = true;
     }
   }, [disabled]);
+
+  // 使用 useLayoutEffect 确保动画状态在 DOM 更新前同步设置
   (0, _react.useEffect)(function () {
     if (!elementRef.current) return;
     var el = elementRef.current;
@@ -46,9 +64,6 @@ function useCollapseAnimation(elementRef, options) {
     }
     var timer = null;
 
-    // 设置 display: block，让元素始终可见，由高度控制折叠
-    el.style.display = 'block';
-
     // 首次渲染时，直接设置初始状态，不做动画
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
@@ -59,9 +74,13 @@ function useCollapseAnimation(elementRef, options) {
       return;
     }
     if (isOpen) {
-      // 展开动画
+      // 展开动画 - 先显示元素
+      setShouldHide(false);
+      setIsAnimating(true);
+      el.style.display = 'block';
       el.style.height = '0px';
       el.style.overflow = 'hidden';
+      el.style.opacity = '0';
 
       // 强制重绘
       void el.offsetHeight;
@@ -71,8 +90,9 @@ function useCollapseAnimation(elementRef, options) {
 
       // 启动动画
       requestAnimationFrame(function () {
-        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction, ", opacity ").concat(duration, "ms ").concat(timingFunction);
         el.style.height = "".concat(scrollHeight, "px");
+        el.style.opacity = '1';
 
         // 动画结束后恢复 auto
         timer = setTimeout(function () {
@@ -80,20 +100,45 @@ function useCollapseAnimation(elementRef, options) {
             el.style.height = '';
             el.style.overflow = '';
             el.style.transition = '';
+            el.style.opacity = '';
+            setIsAnimating(false);
           }
         }, duration);
       });
     } else {
       // 收起动画
+      setIsAnimating(true);
+
+      // 临时添加父元素的 open class,确保用户依赖此 class 的布局样式在获取高度时生效
+      var parentElement = el.parentElement;
+      var needTempClass = parentOpenClassName && parentElement;
+      if (needTempClass) {
+        parentElement.classList.add(parentOpenClassName);
+      }
+
+      // 强制重绘,确保临时 class 生效
+      void el.offsetHeight;
       var _scrollHeight = el.scrollHeight;
       el.style.height = "".concat(_scrollHeight, "px");
       el.style.overflow = 'hidden';
+      el.style.opacity = '1';
 
       // 强制重绘
       void el.offsetHeight;
       requestAnimationFrame(function () {
-        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction, ", opacity ").concat(duration, "ms ").concat(timingFunction);
         el.style.height = '0px';
+        el.style.opacity = '0';
+
+        // 动画结束后隐藏元素
+        timer = setTimeout(function () {
+          // 移除临时 class
+          if (needTempClass) {
+            parentElement.classList.remove(parentOpenClassName);
+          }
+          setShouldHide(true);
+          setIsAnimating(false);
+        }, duration);
       });
     }
 
@@ -104,4 +149,14 @@ function useCollapseAnimation(elementRef, options) {
       }
     };
   }, [isOpen, disabled, duration, timingFunction]);
+  if (disabled) {
+    return {
+      shouldHide: !isOpen,
+      shouldKeepOpen: false
+    };
+  }
+  return {
+    shouldHide: shouldHide,
+    shouldKeepOpen: isAnimating && !isOpen
+  };
 }

package/cjs/components/use-popup/use-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAOhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;0BAqHK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAa9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBAnC7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAvEzC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;8BAOvC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;2BAyJxD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAMxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CA8BlE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAOhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;0BAsHK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAa9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBAnC7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAxEzC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;8BAOvC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;2BA0JxD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAMxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CA8BlE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/cjs/components/use-popup/use-popup.js

@@ -64,9 +64,10 @@ var usePopup = function usePopup(props) {
   var changeOpen = function changeOpen(openIn, delay) {
     if (context.triggerTimer) clearTimeout(context.triggerTimer);
     context.triggerTimer = setTimeout(function () {
-      var _props$onCollapse;
-      if (open === openIn) return;
-      (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, openIn);
+      if (open !== openIn) {
+        var _props$onCollapse;
+        (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, openIn);
+      }
       if (props.open === undefined) {
         setOpenState(openIn);
       }

package/esm/common/use-collapse-animation/use-collapse-animation.d.ts

@@ -19,6 +19,21 @@ export interface UseCollapseAnimationOptions {
      * @default 'cubic-bezier(.2,0,0,1)'
      */
     timingFunction?: string;
+    /**
+     * 父元素的 open class 名称
+     * 用于在获取 scrollHeight 时临时添加,确保用户依赖此 class 的样式生效
+     */
+    parentOpenClassName?: string;
+}
+export interface UseCollapseAnimationResult {
+    /**
+     * 是否应该隐藏元素(动画结束后且 isOpen 为 false 时返回 true)
+     */
+    shouldHide: boolean;
+    /**
+     * 是否应该保持 open 状态(动画进行中时返回 true)
+     */
+    shouldKeepOpen: boolean;
 }
 /**
  * 为元素添加折叠/展开动画的 Hook
@@ -26,10 +41,11 @@ export interface UseCollapseAnimationOptions {
  * @example
  * ```tsx
  * const ref = useRef<HTMLDivElement>(null);
- * useCollapseAnimation(ref, { isOpen: true });
+ * const { shouldHide, shouldKeepOpen } = useCollapseAnimation(ref, { isOpen: true });
  *
- * return <div ref={ref}>Content</div>;
+ * return <div ref={ref} className={shouldHide ? 'hide' : ''}>Content</div>;
  * ```
+ * @returns 动画状态对象
  */
-export declare function useCollapseAnimation<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>, options: UseCollapseAnimationOptions): void;
+export declare function useCollapseAnimation<T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>, options: UseCollapseAnimationOptions): UseCollapseAnimationResult;
 //# sourceMappingURL=use-collapse-animation.d.ts.map

package/esm/common/use-collapse-animation/use-collapse-animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-collapse-animation.d.ts","sourceRoot":"","sources":["use-collapse-animation.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,OAAO,EAAE,2BAA2B,QAwFrC"}
+{"version":3,"file":"use-collapse-animation.d.ts","sourceRoot":"","sources":["use-collapse-animation.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACtE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAC9B,OAAO,EAAE,2BAA2B,GACnC,0BAA0B,CAoI5B"}

package/esm/common/use-collapse-animation/use-collapse-animation.js

@@ -1,14 +1,21 @@
-import { useEffect, useRef } from 'react';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useRef, useState } from 'react';
 /**
  * 为元素添加折叠/展开动画的 Hook
  *
  * @example
  * ```tsx
  * const ref = useRef<HTMLDivElement>(null);
- * useCollapseAnimation(ref, { isOpen: true });
+ * const { shouldHide, shouldKeepOpen } = useCollapseAnimation(ref, { isOpen: true });
  *
- * return <div ref={ref}>Content</div>;
+ * return <div ref={ref} className={shouldHide ? 'hide' : ''}>Content</div>;
  * ```
+ * @returns 动画状态对象
  */
 export function useCollapseAnimation(elementRef, options) {
   var isOpen = options.isOpen,
@@ -17,8 +24,17 @@ export function useCollapseAnimation(elementRef, options) {
     _options$disabled = options.disabled,
     disabled = _options$disabled === void 0 ? false : _options$disabled,
     _options$timingFuncti = options.timingFunction,
-    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti;
+    timingFunction = _options$timingFuncti === void 0 ? 'cubic-bezier(.2,0,0,1)' : _options$timingFuncti,
+    parentOpenClassName = options.parentOpenClassName;
   var isFirstRenderRef = useRef(true);
+  var _useState = useState(!isOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldHide = _useState2[0],
+    setShouldHide = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAnimating = _useState4[0],
+    setIsAnimating = _useState4[1];
 
   // 当 disabled 状态变化时，重置首次渲染标记
   useEffect(function () {
@@ -26,6 +42,8 @@ export function useCollapseAnimation(elementRef, options) {
       isFirstRenderRef.current = true;
     }
   }, [disabled]);
+
+  // 使用 useLayoutEffect 确保动画状态在 DOM 更新前同步设置
   useEffect(function () {
     if (!elementRef.current) return;
     var el = elementRef.current;
@@ -40,9 +58,6 @@ export function useCollapseAnimation(elementRef, options) {
     }
     var timer = null;
 
-    // 设置 display: block，让元素始终可见，由高度控制折叠
-    el.style.display = 'block';
-
     // 首次渲染时，直接设置初始状态，不做动画
     if (isFirstRenderRef.current) {
       isFirstRenderRef.current = false;
@@ -53,9 +68,13 @@ export function useCollapseAnimation(elementRef, options) {
       return;
     }
     if (isOpen) {
-      // 展开动画
+      // 展开动画 - 先显示元素
+      setShouldHide(false);
+      setIsAnimating(true);
+      el.style.display = 'block';
       el.style.height = '0px';
       el.style.overflow = 'hidden';
+      el.style.opacity = '0';
 
       // 强制重绘
       void el.offsetHeight;
@@ -65,8 +84,9 @@ export function useCollapseAnimation(elementRef, options) {
 
       // 启动动画
       requestAnimationFrame(function () {
-        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction, ", opacity ").concat(duration, "ms ").concat(timingFunction);
         el.style.height = "".concat(scrollHeight, "px");
+        el.style.opacity = '1';
 
         // 动画结束后恢复 auto
         timer = setTimeout(function () {
@@ -74,20 +94,45 @@ export function useCollapseAnimation(elementRef, options) {
             el.style.height = '';
             el.style.overflow = '';
             el.style.transition = '';
+            el.style.opacity = '';
+            setIsAnimating(false);
           }
         }, duration);
       });
     } else {
       // 收起动画
+      setIsAnimating(true);
+
+      // 临时添加父元素的 open class,确保用户依赖此 class 的布局样式在获取高度时生效
+      var parentElement = el.parentElement;
+      var needTempClass = parentOpenClassName && parentElement;
+      if (needTempClass) {
+        parentElement.classList.add(parentOpenClassName);
+      }
+
+      // 强制重绘,确保临时 class 生效
+      void el.offsetHeight;
       var _scrollHeight = el.scrollHeight;
       el.style.height = "".concat(_scrollHeight, "px");
       el.style.overflow = 'hidden';
+      el.style.opacity = '1';
 
       // 强制重绘
       void el.offsetHeight;
       requestAnimationFrame(function () {
-        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction);
+        el.style.transition = "height ".concat(duration, "ms ").concat(timingFunction, ", opacity ").concat(duration, "ms ").concat(timingFunction);
         el.style.height = '0px';
+        el.style.opacity = '0';
+
+        // 动画结束后隐藏元素
+        timer = setTimeout(function () {
+          // 移除临时 class
+          if (needTempClass) {
+            parentElement.classList.remove(parentOpenClassName);
+          }
+          setShouldHide(true);
+          setIsAnimating(false);
+        }, duration);
       });
     }
 
@@ -98,4 +143,14 @@ export function useCollapseAnimation(elementRef, options) {
       }
     };
   }, [isOpen, disabled, duration, timingFunction]);
+  if (disabled) {
+    return {
+      shouldHide: !isOpen,
+      shouldKeepOpen: false
+    };
+  }
+  return {
+    shouldHide: shouldHide,
+    shouldKeepOpen: isAnimating && !isOpen
+  };
 }

package/esm/components/use-popup/use-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAOhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;0BAqHK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAa9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBAnC7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAvEzC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;8BAOvC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;2BAyJxD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAMxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CA8BlE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAOhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;0BAsHK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAa9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBAnC7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAxEzC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;8BAOvC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;2BA0JxD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAMxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CA8BlE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/components/use-popup/use-popup.js

@@ -57,9 +57,10 @@ var usePopup = function usePopup(props) {
   var changeOpen = function changeOpen(openIn, delay) {
     if (context.triggerTimer) clearTimeout(context.triggerTimer);
     context.triggerTimer = setTimeout(function () {
-      var _props$onCollapse;
-      if (open === openIn) return;
-      (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, openIn);
+      if (open !== openIn) {
+        var _props$onCollapse;
+        (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 || _props$onCollapse.call(props, openIn);
+      }
       if (props.open === undefined) {
         setOpenState(openIn);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/hooks",
-  "version": "3.9.2-beta.1",
+  "version": "3.9.2-beta.3",
   "description": "",
   "keywords": [],
   "license": "MIT",