@arco-design/mobile-react 2.36.2 → 2.38.0

package/cjs/load-more/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/loading/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/masking/index.d.ts

@@ -1,6 +1,7 @@
-import React, { ReactNode, CSSProperties } from 'react';
-import { TransitionProps } from '../transition';
-import { OpenBaseProps } from './methods';
+import type { ReactNode, CSSProperties } from 'react';
+import React from 'react';
+import type { TransitionProps } from '../transition';
+import type { OpenBaseProps } from './methods';
 export * from './methods';
 export interface MaskingCommonProps {
     /**
@@ -50,6 +51,11 @@ export interface MaskingCommonProps {
      * @default "fade"
      */
     contentTransitionType?: string;
+    /**
+     * 内容过渡动画类名变量标识
+     * @en Content transition animation classname variable identifier
+     */
+    contentTransitionVarType?: string;
     /**
      * 菜单内部内容
      * @en Contents of menu
@@ -205,11 +211,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
      * @param {MaskingProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "className" | "children" | "context" | "key" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "className" | "children" | "context" | "key" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/masking/index.js

@@ -51,6 +51,7 @@ var Masking = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       maskTransitionType = _props$maskTransition === void 0 ? 'fade' : _props$maskTransition,
       _props$contentTransit = props.contentTransitionType,
       contentTransitionType = _props$contentTransit === void 0 ? 'fade' : _props$contentTransit,
+      contentTransitionVarType = props.contentTransitionVarType,
       _props$maskTransition2 = props.maskTransitionTimeout,
       maskTransitionTimeout = _props$maskTransition2 === void 0 ? 300 : _props$maskTransition2,
       _props$contentTransit2 = props.contentTransitionTimeout,
@@ -195,6 +196,7 @@ var Masking = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       in: innerVisible,
       timeout: contentTransitionTimeout,
       type: contentTransitionType,
+      transitionVarType: contentTransitionVarType,
       mountOnEnter: mountOnEnter,
       unmountOnExit: unmountOnExit,
       nodeRef: contentRef

package/cjs/masking/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/nav-bar/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/notice-bar/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/notify/index.d.ts

@@ -51,8 +51,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
      * @param {string | NotifyProps} config
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
-    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">) => void;
         close: () => void;
     };
     /**
@@ -61,8 +61,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
      * @param {string | NotifyProps} config
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
-    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">) => void;
         close: () => void;
     };
     /**
@@ -71,8 +71,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
      * @param {string | NotifyProps} config
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
-    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">) => void;
         close: () => void;
     };
     /**
@@ -81,8 +81,8 @@ declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefA
      * @param {string | NotifyProps} config
      * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
      */
-    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "ref" | "className" | "style" | "duration" | "content" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose">) => void;
         close: () => void;
     };
 };

package/cjs/notify/index.js

@@ -54,8 +54,8 @@ var Notify = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       getContainer = props.getContainer;
   var domRef = (0, _react.useRef)(null);
   var innerRef = (0, _react.useRef)(null);
-  var closeTimerRef = (0, _react.useRef)();
-  var onCloseTimeRef = (0, _react.useRef)();
+  var closeTimerRef = (0, _react.useRef)(undefined);
+  var onCloseTimeRef = (0, _react.useRef)(undefined);
 
   var _useState = (0, _react.useState)(!visible),
       hasTrans = _useState[0],

package/cjs/notify/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/pagination/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/picker/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/picker-view/components/cascader.js

@@ -127,7 +127,9 @@ var Cascader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       rows: rows,
       hideEmptyCols: hideEmptyCols,
       ref: function ref(cellRef) {
-        return cellRef && (pickerCellsRef.current[index] = cellRef);
+        if (cellRef) {
+          pickerCellsRef.current[index] = cellRef;
+        }
       },
       touchToStop: touchToStop
     });

package/cjs/picker-view/components/picker-cell.js

@@ -68,7 +68,7 @@ var PickerCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var rowCount = Math.max(rows % 2 === 0 ? rows + 1 : rows, 3);
   var isTouchMoveRef = (0, _react.useRef)(false);
   var isTouchStopped = (0, _react.useRef)(false);
-  var unmountCallbackRef = (0, _react.useRef)();
+  var unmountCallbackRef = (0, _react.useRef)(undefined);
   var timeRef = (0, _react.useRef)(null);
   var colStyle = (0, _react.useMemo)(function () {
     return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({

package/cjs/picker-view/index.js

@@ -269,7 +269,9 @@ var PickerView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         rows: rows,
         hideEmptyCols: hideEmptyCols,
         ref: function ref(cellRef) {
-          return cellRef && (pickerCellsRef.current[index] = cellRef);
+          if (cellRef) {
+            pickerCellsRef.current[index] = cellRef;
+          }
         },
         touchToStop: touchToStop
       });

package/cjs/picker-view/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/popover/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/popover/style/css/menu.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode

package/cjs/popup/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
+import type { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
 export * from './methods';
 export declare type DirectionType = 'left' | 'right' | 'top' | 'bottom';
 export interface PopupProps extends MaskingCommonProps {
@@ -66,11 +66,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupProps & React.RefAt
      * @param {PopupProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "ref" | "className" | "children" | "direction" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "ref" | "className" | "children" | "direction" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchMove" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/popup/index.js

@@ -73,6 +73,7 @@ var Popup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         translateZ: translateZ
       }, maskClass),
       contentTransitionType: contentTransitionType || "slide-from-" + direction,
+      contentTransitionVarType: "popup-slide",
       contentClass: (0, _mobileUtils.cls)(prefix + "-content", direction, {
         'need-bottom-offset': needBottomOffset
       }, {

package/cjs/popup/style/css/index.css

@@ -75,6 +75,24 @@
  * }
  * ```
  */
+/**
+ * 为属性设置 transition 变量
+ * @desc {en} set the transition variable for the attribute
+ * @param @transitionVariable transition 变量名
+ * @param @transitionVariable {en} transition variable name
+ * @param @backupVariable 备份变量名
+ * @param @backupVariable {en} backup variable name
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
+ * }
+ * ```
+ */
 /**
  * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
  * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
@@ -579,7 +597,16 @@
   position: fixed;
   z-index: 1001;
 }
+.arco-popup-content[class*="-enter-active"] {
+  -webkit-transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+          transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+}
+.arco-popup-content[class*="-exit-active"] {
+  -webkit-transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+          transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+}
 .arco-popup-content.need-bottom-offset {
+  padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
 .arco-popup-content.left {
@@ -615,6 +642,14 @@
   z-index: 1000;
   background:  rgba(0, 0, 0, 0.6) ;
 }
+.arco-popup-mask[class*="-enter-active"] {
+  -webkit-transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+          transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+}
+.arco-popup-mask[class*="-exit-active"] {
+  -webkit-transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+          transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+}
 .arco-popup-mask.translateZ {
   -webkit-transform: translateZ(1PX);
           transform: translateZ(1PX);

package/cjs/popup/style/index.less

@@ -1,8 +1,12 @@
 @import '../../../style/mixin.less';
 
 .set-popup-transform(@transform) {
-    &-enter, &-exit-active, &-exit-done {
+
+    &-enter,
+    &-exit-active,
+    &-exit-done {
         transform: @transform;
+
         &.translateZ {
             transform: @transform translateZ(2PX);
         }
@@ -14,63 +18,92 @@
         &-left {
             .set-popup-transform(translate(-100%, 0));
         }
+
         &-right {
             .set-popup-transform(translate(100%, 0));
         }
+
         &-top {
             .set-popup-transform(translate(0, -100%));
         }
+
         &-bottom {
             .set-popup-transform(translate(0, 100%));
         }
     }
-    &-content, &-mask {
+
+    &-content,
+    &-mask {
         &[class*="-enter-active"] {
             &.translateZ {
                 transform: translateZ(2PX);
             }
+
             transform: translate(0, 0);
             .use-var(transition, popup-enter-transition);
         }
     }
+
     [class*="-exit-active"] {
         .use-var(transition, popup-exit-transition);
     }
+
     &-content {
+        &[class*="-enter-active"] {
+            transition-duration: var(--builtin-transition-popup-slide-enter-duration, 450ms);
+        }
+        &[class*="-exit-active"] {
+            transition-duration: var(--builtin-transition-popup-slide-exit-duration, 240ms);
+        }
         &.need-bottom-offset {
+            padding-bottom: constant(safe-area-inset-bottom);
             padding-bottom: env(safe-area-inset-bottom);
         }
+
         &.left {
             left: 0;
             top: 0;
             height: 100%;
         }
+
         &.top {
             left: 0;
             top: 0;
             width: 100%;
         }
+
         &.right {
             right: 0;
             top: 0;
             height: 100%;
         }
+
         &.bottom {
             left: 0;
             bottom: 0;
             width: 100%;
         }
+
         &.translateZ {
             transform: translateZ(2PX);
         }
+
         .use-var(background, popup-content-background);
         position: fixed;
-        z-index: @full-screen-z-index + 1;
+        z-index: @full-screen-z-index+1;
     }
+
     &-mask {
+        &[class*="-enter-active"] {
+            transition-duration: var(--builtin-transition-fade-enter-duration, 450ms);
+        }
+        &[class*="-exit-active"] {
+            transition-duration: var(--builtin-transition-fade-exit-duration, 240ms);
+        }
         &.translateZ {
             transform: translateZ(1PX);
         }
+
         position: fixed;
         width: 100%;
         height: 100%;