@arco-design/mobile-react 2.37.0 → 2.38.1

package/esnext/dialog/index.js

@@ -8,7 +8,7 @@ export * from './methods';
 const Dialog = forwardRef((props, ref) => {
     const system = useSystem();
     const nowSystem = props.platform || system;
-    const { close = () => { }, children, title, footer = [], footerType = 'grid', renderFooter, footerCollapseCount = 3, titleAlign = nowSystem === 'android' ? 'left' : 'center', contentAlign = nowSystem === 'android' ? 'left' : 'center', className, maskClass, contentClass, contentStyle, contentTransitionType = nowSystem === 'android' ? 'fade' : 'fade-scale', maskTransitionTimeout = 300, contentTransitionTimeout = 450, extra, ...restProps } = props;
+    const { close = () => { }, children, title, footer = [], footerType = 'grid', renderFooter, footerCollapseCount = 3, titleAlign = nowSystem === 'android' ? 'left' : 'center', contentAlign = nowSystem === 'android' ? 'left' : 'center', className, maskClass, contentClass, contentStyle, contentTransitionType = nowSystem === 'android' ? 'fade' : 'fade-scale', maskTransitionTimeout = 300, contentTransitionTimeout = nowSystem === 'android' ? 300 : { enter: 450, exit: 150 }, extra, ...restProps } = props;
     const maskingRef = useRef(null);
     const contentRef = useRef(null);
     useImperativeHandle(ref, () => ({

package/esnext/dialog/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
@@ -559,12 +577,16 @@
   }
 }
 .arco-fade-scale-enter-active {
-  -webkit-animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
-          animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+  -webkit-animation: fade-scale-on cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+          animation: fade-scale-on cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+  -webkit-animation-duration: var(--builtin-transition-fade-scale-enter-duration, 0.45s);
+          animation-duration: var(--builtin-transition-fade-scale-enter-duration, 0.45s);
 }
 .arco-fade-scale-exit-active {
-  -webkit-animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
-          animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+  -webkit-animation: fade-scale-off cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+          animation: fade-scale-off cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+  -webkit-animation-duration: var(--builtin-transition-fade-scale-exit-duration, 0.15s);
+          animation-duration: var(--builtin-transition-fade-scale-exit-duration, 0.15s);
 }
 .arco-dialog-mask,
 .arco-dialog-container {

package/esnext/dialog/style/index.less

@@ -19,11 +19,13 @@
 }
 
 .@{prefix}-fade-scale-enter-active {
-    animation: fade-scale-on .45s cubic-bezier(.2, 1.23, .25, 1) forwards;
+    animation: fade-scale-on cubic-bezier(.2, 1.23, .25, 1) forwards;
+    animation-duration: var(--builtin-transition-fade-scale-enter-duration, .45s);
 }
 
 .@{prefix}-fade-scale-exit-active {
-    animation: fade-scale-off .15s cubic-bezier(.48, .04, .52, .96) forwards;
+    animation: fade-scale-off cubic-bezier(.48, .04, .52, .96) forwards;
+    animation-duration: var(--builtin-transition-fade-scale-exit-duration, .15s);
 }
 
 .@{prefix}-dialog {

package/esnext/divider/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/esnext/dropdown/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/esnext/dropdown-menu/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/esnext/ellipsis/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/esnext/form/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/esnext/grid/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/esnext/image/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/esnext/image-picker/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImagePickerProps, ImagePickerRef } from './type';
+import type { ImagePickerProps, ImagePickerRef } from './type';
 export * from './type';
 declare const _default: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<ImagePickerRef>> & {
     displayName?: string | undefined;

package/esnext/image-picker/index.js

@@ -16,7 +16,7 @@ const ImagePicker = forwardRef((props, ref) => {
     useImperativeHandle(ref, () => ({
         dom: domRef.current,
     }));
-    const uploadFunc = new Upload({ ...props, files: images }, fileRef, cacheRef);
+    const uploadFunc = new Upload({ ...props, onUploadClick: props.onUploadClick || props.onSelectClick, files: images }, fileRef, cacheRef);
     const getGridData = (prefixCls, locale) => {
         const errorNode = (index) => {
             if (renderError) {

package/esnext/image-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/esnext/image-picker/type.d.ts

@@ -1,6 +1,6 @@
-import { InputHTMLAttributes } from 'react';
-import { ImageProps } from '../image';
-import { UploadCommonProps, CommonFileItem } from '../uploader/upload/type';
+import type { InputHTMLAttributes } from 'react';
+import type { ImageProps } from '../image';
+import type { UploadCommonProps, CommonFileItem } from '../uploader/upload/type';
 export interface ImagePickItem extends CommonFileItem {
     /**
      * 图片地址
@@ -8,7 +8,7 @@ export interface ImagePickItem extends CommonFileItem {
      */
     url: string;
 }
-export interface ImagePickerProps extends Omit<UploadCommonProps<ImagePickItem>, 'files'> {
+export interface ImagePickerProps extends Omit<UploadCommonProps<ImagePickItem>, 'files' | 'onUploadClick'> {
     /**
      * 自定义类名
      * @en Custom className
@@ -100,11 +100,17 @@ export interface ImagePickerProps extends Omit<UploadCommonProps<ImagePickItem>,
      * @en Defined uploading display
      */
     renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
+    /**
+     * 选图点击事件(同onUploadClick)
+     * @en Select icon click event(same as onUploadClick)
+     * @deprecated Please use onUploadClick instead
+     */
+    onSelectClick?: () => void;
     /**
      * 选图点击事件
      * @en Select icon click event
      */
-    onSelectClick?: () => void;
+    onUploadClick?: () => void;
 }
 export interface ImagePickerRef {
     /**

package/esnext/image-preview/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/esnext/index-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/esnext/input/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/esnext/keyboard/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/esnext/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/esnext/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/esnext/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" | "className" | "context" | "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>>, "children" | "ref" | "key" | "className" | "context" | "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" | "className" | "context" | "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>>, "children" | "ref" | "key" | "className" | "context" | "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/esnext/masking/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState, } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';
 import { cls, nextTick, componentWrapper } from '@arco-design/mobile-utils';
 import { ContextLayout, CompWithGlobalContext } from '../context-provider';
 import Portal from '../portal';
@@ -7,7 +7,7 @@ import { usePopupScroll, usePreventBodyScroll } from '../_helpers';
 import { open } from './methods';
 export * from './methods';
 const Masking = forwardRef((props, ref) => {
-    const { className, visible = false, maskClass, maskStyle, contentClass, contentStyle, close, onClose, onOpen, onMaskClick, children, maskTransitionType = 'fade', contentTransitionType = 'fade', maskTransitionTimeout = 300, contentTransitionTimeout = 300, maskClosable = true, animatingClosable, mountOnEnter = true, unmountOnExit = true, orientationDirection = 'top', preventBodyScroll = true, initialBodyOverflow, contentAtCenter = false, gestureOutOfControl = false, getContainer, getScrollContainer, onPreventTouchMove, onTouchMove, } = props;
+    const { className, visible = false, maskClass, maskStyle, contentClass, contentStyle, close, onClose, onOpen, onMaskClick, children, maskTransitionType = 'fade', contentTransitionType = 'fade', contentTransitionVarType, maskTransitionTimeout = 300, contentTransitionTimeout = 300, maskClosable = true, animatingClosable, mountOnEnter = true, unmountOnExit = true, orientationDirection = 'top', preventBodyScroll = true, initialBodyOverflow, contentAtCenter = false, gestureOutOfControl = false, getContainer, getScrollContainer, onPreventTouchMove, onTouchMove, } = props;
     const domRef = useRef(null);
     const maskRef = useRef(null);
     const contentRef = useRef(null);
@@ -86,7 +86,7 @@ const Masking = forwardRef((props, ref) => {
             React.createElement("div", { className: cls(`${prefixCls}-masking`, 'all-border-box', className), ref: domRef },
                 React.createElement(Transition, { in: innerVisible, timeout: maskTransitionTimeout, type: maskTransitionType, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, nodeRef: maskRef },
                     React.createElement("div", { ref: maskRef, className: cls(`${prefixCls}-masking-mask`, extraClass, maskClass), onClick: handleMaskAction, style: maskStyle })),
-                React.createElement(Transition, { in: innerVisible, timeout: contentTransitionTimeout, type: contentTransitionType, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, nodeRef: contentRef },
+                React.createElement(Transition, { in: innerVisible, timeout: contentTransitionTimeout, type: contentTransitionType, transitionVarType: contentTransitionVarType, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, nodeRef: contentRef },
                     React.createElement("div", { ref: contentRef, className: cls(`${prefixCls}-masking-content`, { 'at-center': contentAtCenter }, extraClass, contentClass), style: contentStyle }, children))))) : null;
     }
     return React.createElement(ContextLayout, null, renderMasking);

package/esnext/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/esnext/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/esnext/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/esnext/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