feat: 恢复CSSMotion调用

Author: IVLIU

docs/examples/_util/motionUtil.ts

@@ -6,7 +6,7 @@ import type {
 
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight: MotionEventHandler = (node) => ({ height: node.offsetHeight });
+const getCurrentHeight: MotionEventHandler = (node) => ({ height: node?.offsetHeight ?? 0 });
 const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
   (event as TransitionEvent).propertyName === 'height';
 

src/Panel.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import KeyCode from '@rc-component/util/lib/KeyCode';
+import CSSMotion from '@rc-component/motion';
 import React from 'react';
 import type { CollapsePanelProps } from './interface';
 import PanelContent from './PanelContent';
@@ -68,8 +69,6 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
       [`${prefixCls}-item-disabled`]: disabled,
     },
     className,
-    // ? 修改为details实现后动画是作用在details元素上 需要将motionName设置在details上
-    openMotion?.motionName,
   );
 
   const headerClassName = classNames(
@@ -102,16 +101,31 @@ const CollapsePanel = React.forwardRef<HTMLDetailsElement, CollapsePanelProps>((
         </span>
         {ifExtraExist && <div className={`${prefixCls}-extra`}>{extra}</div>}
       </summary>
-      <PanelContent
-        prefixCls={prefixCls}
-        classNames={customizeClassNames}
-        styles={styles}
-        isActive={isActive}
+      <CSSMotion
+        visible={isActive}
+        leavedClassName={`${prefixCls}-panel-hidden`}
+        {...openMotion}
         forceRender={forceRender}
-        role={accordion ? 'tabpanel' : undefined}
+        removeOnLeave={destroyOnHidden}
       >
-        {children}
-      </PanelContent>
+        {({ className: motionClassName, style: motionStyle }, motionRef) => {
+          return (
+            <PanelContent
+              ref={motionRef}
+              prefixCls={prefixCls}
+              className={motionClassName}
+              classNames={customizeClassNames}
+              style={motionStyle}
+              styles={styles}
+              isActive={isActive}
+              forceRender={forceRender}
+              role={accordion ? 'tabpanel' : undefined}
+            >
+              {children}
+            </PanelContent>
+          );
+        }}
+      </CSSMotion>
     </details>
   );
 });