@arco-design/mobile-react 2.37.0 → 2.38.1

package/esnext/swipe-action/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/swipe-load/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/switch/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/tab-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/tabs/index.js

@@ -205,6 +205,8 @@ const Tabs = forwardRef((props, ref) => {
         if (scrollingRef.current && tabBarResetWhenScroll === 'touchend') {
             cellRef.current && cellRef.current.scrollToCenter();
         }
+        setCellTrans(true);
+        setPaneTrans(true);
         if (!touchStartedRef.current ||
             posAdjustingRef.current ||
             scrollingRef.current ||
@@ -212,8 +214,6 @@ const Tabs = forwardRef((props, ref) => {
             return;
         }
         touchStartedRef.current = false;
-        setCellTrans(true);
-        setPaneTrans(true);
         const touchEndTime = new Date().getTime();
         const dis = distanceRef.current;
         const speed = (dis / (touchEndTime - touchStartTimeRef.current)) * 1000;
@@ -329,6 +329,7 @@ const Tabs = forwardRef((props, ref) => {
             tabBarStyle,
             tabBarClass,
             tabBarStopPropagation,
+            onUnderlineFirstShow: () => setCellTrans(true),
             ...commonProps,
         };
         const CellComp = React.createElement(TabCell, Object.assign({}, cellProps));

package/esnext/tabs/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/tabs/tab-cell.js

@@ -4,7 +4,7 @@ import { useSystem, useUpdateEffect } from '../_helpers';
 import TabCellUnderline from './tab-cell-underline';
 import { GlobalContext } from '../context-provider';
 const TabCell = forwardRef((props, ref) => {
-    const { tabs, prefixCls, activeIndex, activeIndexRef, tabDirection, type, onTabClick, changeIndex, tabBarPosition, tabBarArrange, tabBarScroll, tabBarFixed, renderUnderline, duration, transitionDuration, useCaterpillar, wrapWidth, wrapHeight, cellTrans, distance, jumpingDis, tabBarExtra, onTabBarOverflowChange, tabBarGutter, tabBarPadding, underlineSize, underlineThick, underlineInnerStyle, caterpillarMaxScale, caterpillarProperty, onTabBarScroll, hideTabBarBeforeMounted, overflowThreshold = 5, tabBarScrollBezier, tabBarScrollDuration, tabBarScrollChance, tabBarHasDivider, showUnderline, underlineAdaptive, disabled, renderTabBarItem, renderTabBarInner, tabBarStyle, tabBarClass, translateZ, tabBarStopPropagation, } = props;
+    const { tabs, prefixCls, activeIndex, activeIndexRef, tabDirection, type, onTabClick, changeIndex, tabBarPosition, tabBarArrange, tabBarScroll, tabBarFixed, renderUnderline, duration, transitionDuration, useCaterpillar, wrapWidth, wrapHeight, cellTrans, distance, jumpingDis, tabBarExtra, onTabBarOverflowChange, tabBarGutter, tabBarPadding, underlineSize, underlineThick, underlineInnerStyle, caterpillarMaxScale, caterpillarProperty, onTabBarScroll, hideTabBarBeforeMounted, overflowThreshold = 5, tabBarScrollBezier, tabBarScrollDuration, tabBarScrollChance, tabBarHasDivider, showUnderline, underlineAdaptive, disabled, renderTabBarItem, renderTabBarInner, tabBarStyle, tabBarClass, translateZ, tabBarStopPropagation, onUnderlineFirstShow, } = props;
     const prefix = `${prefixCls}-tab-cell`;
     const { useRtl } = useContext(GlobalContext);
     const domRef = useRef(null);
@@ -66,6 +66,13 @@ const TabCell = forwardRef((props, ref) => {
     useEffect(() => {
         updateScrollPosition();
     }, [activeIndex, wrapSize]);
+    useEffect(() => {
+        // underline 首次展示时，通知父组件启用 cellTrans
+        // @en When underline is first shown, notify parent component to enable cellTrans
+        if (showLine && onUnderlineFirstShow) {
+            onUnderlineFirstShow();
+        }
+    }, [showLine]);
     useUpdateEffect(() => {
         setCellOverflow();
         underlineRef.current?.resetUnderlineStyle();

package/esnext/tabs/type.d.ts

@@ -533,6 +533,11 @@ export interface TabCellProps extends Pick<TabsProps, 'tabs' | 'type' | 'onTabCl
      * @en Does the touch event of the current TabBar require stopPropagation
      */
     tabBarStopPropagation: boolean;
+    /**
+     * underline 首次展示时的回调
+     * @en Callback when underline is first shown
+     */
+    onUnderlineFirstShow?: () => void;
 }
 export interface TabCellRef {
     /**

package/esnext/tag/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/textarea/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/toast/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/transition/index.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import type { ReactNode } from 'react';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
     /**
      * 待执行动画内容
      * @en Animation content to be executed
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * 待执行动画css类名
      * @en Css classname of the animation to be executed
@@ -37,6 +37,12 @@ export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
      * @default true
      */
     unmountOnExit?: boolean;
+    /**
+     * 动画时长变量标识
+     * @en Animation duration variable identifier
+     * @default type 属性值
+     */
+    transitionVarType?: string;
 };
 /**
  * react-transition-group/CSSTransition 的简单封装。

package/esnext/transition/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { cloneElement, useMemo } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { ContextLayout } from '../context-provider';
+const DEFAULT_TIMEOUT = 300;
 /**
  * react-transition-group/CSSTransition 的简单封装。
  * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -10,6 +11,30 @@ import { ContextLayout } from '../context-provider';
  * @name_en Transition
  */
 export default function Transition(props) {
-    const { children = React.createElement("div", null), type, in: transIn, timeout = 300, mountOnEnter = true, unmountOnExit = true, ...restProps } = props;
-    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(CSSTransition, Object.assign({ in: transIn, timeout: timeout, classNames: `${prefixCls}-${type}`, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }, restProps), children))));
+    const { children = React.createElement("div", null), type, in: transIn, timeout = DEFAULT_TIMEOUT, mountOnEnter = true, unmountOnExit = true, transitionVarType, ...restProps } = props;
+    const varPrefix = `builtin-transition-${transitionVarType || type}`;
+    // 计算动画时长，支持对象形式的 timeout
+    const getDuration = (phase) => {
+        if (typeof timeout === 'number') {
+            return timeout;
+        }
+        return timeout[phase] || DEFAULT_TIMEOUT;
+    };
+    // 生成 CSS 变量样式
+    const cssVariables = useMemo(() => {
+        const enterDuration = getDuration('enter');
+        const exitDuration = getDuration('exit');
+        const appearDuration = getDuration('appear');
+        return {
+            [`--${varPrefix}-enter-duration`]: `${enterDuration}ms`,
+            [`--${varPrefix}-exit-duration`]: `${exitDuration}ms`,
+            [`--${varPrefix}-appear-duration`]: `${appearDuration}ms`,
+        };
+    }, [timeout, varPrefix]);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(CSSTransition, Object.assign({ in: transIn, timeout: timeout, classNames: `${prefixCls}-${type}`, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }, restProps), cloneElement(children, {
+        style: {
+            ...cssVariables,
+            ...children?.props?.style,
+        },
+    })))));
 }

package/esnext/transition/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
@@ -517,8 +535,8 @@
   opacity: 1;
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  -webkit-transition-duration:  300ms ;
-          transition-duration:  300ms ;
+  -webkit-transition-duration: var(--builtin-transition-fade-enter-duration,  300ms );
+          transition-duration: var(--builtin-transition-fade-enter-duration,  300ms );
 }
 .arco-fade-exit {
   opacity: 1;
@@ -527,8 +545,8 @@
   opacity: 0;
   -webkit-transition-property: opacity;
   transition-property: opacity;
-  -webkit-transition-duration:  300ms ;
-          transition-duration:  300ms ;
+  -webkit-transition-duration: var(--builtin-transition-fade-exit-duration,  300ms );
+          transition-duration: var(--builtin-transition-fade-exit-duration,  300ms );
 }
 .arco-fade-exit-done {
   display: none;

package/esnext/transition/style/index.less

@@ -9,7 +9,7 @@
     &-enter-active {
         opacity: 1;
         transition-property: opacity;
-        .use-var(transition-duration, transition-fade-duration);
+        .use-transition-var(builtin-transition-fade-enter-duration, transition-fade-duration);
     }
 
     &-exit {
@@ -19,7 +19,7 @@
     &-exit-active {
         opacity: 0;
         transition-property: opacity;
-        .use-var(transition-duration, transition-fade-duration);
+        .use-transition-var(builtin-transition-fade-exit-duration, transition-fade-duration);
     }
 
     &-exit-done {

package/esnext/uploader/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.37.0",
+    "version": "2.38.1",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.22.0",
+        "@arco-design/mobile-utils": "2.23.1",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9b5b8001d5399a3233e02179497a4a3958a74a23"
+    "gitHead": "349c0ae646228a80b3851dd825a14069f2286bff"
 }

package/style/css/public.css

@@ -288,6 +288,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/tokens/mixin/index.less

@@ -110,9 +110,38 @@
  * ```
  */
 .use-var(@property, @variables, @preValues: '', @nextValues: '') {
-    @{property}: ~"@{preValues}" @@variables ~"@{nextValues}";
+    & when (@use-css-vars = 0) {
+        @{property}: ~"@{preValues}" @@variables ~"@{nextValues}";
+    }
+    & when (@use-css-vars = 1) {
+        @{property}: ~"@{preValues}" ~"var(--@{variables}, "@@variables~")" ~"@{nextValues}";
+    }
+}
+
+/**
+ * 为属性设置 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);
+ * }
+ * ```
+ */
+.use-transition-var(@transitionVariable, @backupVariable, @property: transition-duration) {
+    & when (@use-css-vars = 0) {
+        @{property}: ~"var(--@{transitionVariable}, "@@backupVariable~")";
+    }
     & when (@use-css-vars = 1) {
-        @{property}: ~"@{preValues}" ~"var(--@{variables})" ~"@{nextValues}";
+        @{property}: ~"var(--@{transitionVariable}, var(--@{backupVariable}, "@@backupVariable~"))";
     }
 }
 

package/umd/action-sheet/index.d.ts

@@ -87,11 +87,11 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "ref" | "className" | "title" | "context" | "key" | "translateZ" | "onTouchMove" | "getContainer" | "items" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };

package/umd/action-sheet/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/umd/avatar/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/umd/badge/index.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export interface BadgeProps {
     /**
      * 自定义类名

package/umd/badge/index.js

@@ -51,7 +51,7 @@
         _props$bordered = props.bordered,
         bordered = _props$bordered === void 0 ? false : _props$bordered,
         _props$timeout = props.timeout,
-        timeout = _props$timeout === void 0 ? 300 : _props$timeout;
+        timeout = _props$timeout === void 0 ? 400 : _props$timeout;
     var domRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
       return {

package/umd/badge/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-scale-enter-active {
-  -webkit-animation: scale-on 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
-          animation: scale-on 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
+  -webkit-animation: scale-on cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
+          animation: scale-on cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
+  -webkit-animation-duration: var(--builtin-transition-scale-enter-duration, 0.4s);
+          animation-duration: var(--builtin-transition-scale-enter-duration, 0.4s);
 }
 .arco-scale-exit-active {
-  -webkit-animation: scale-off 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
-          animation: scale-off 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
+  -webkit-animation: scale-off cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
+          animation: scale-off cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
+  -webkit-animation-duration: var(--builtin-transition-scale-exit-duration, 0.4s);
+          animation-duration: var(--builtin-transition-scale-exit-duration, 0.4s);
 }
 .arco-badge {
   cursor: pointer;