@arco-design/mobile-react 2.36.2 → 2.38.0

package/umd/tabs/tab-cell.js

@@ -72,7 +72,8 @@
         tabBarStyle = props.tabBarStyle,
         tabBarClass = props.tabBarClass,
         translateZ = props.translateZ,
-        tabBarStopPropagation = props.tabBarStopPropagation;
+        tabBarStopPropagation = props.tabBarStopPropagation,
+        onUnderlineFirstShow = props.onUnderlineFirstShow;
     var prefix = prefixCls + "-tab-cell";
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
@@ -151,6 +152,13 @@
     (0, _react.useEffect)(function () {
       updateScrollPosition();
     }, [activeIndex, wrapSize]);
+    (0, _react.useEffect)(function () {
+      // underline 首次展示时，通知父组件启用 cellTrans
+      // @en When underline is first shown, notify parent component to enable cellTrans
+      if (showLine && onUnderlineFirstShow) {
+        onUnderlineFirstShow();
+      }
+    }, [showLine]);
     (0, _helpers.useUpdateEffect)(function () {
       var _underlineRef$current2;
 

package/umd/tabs/type.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, ReactNodeArray } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export declare type TabData = string | {
     title: ReactNode;
     [x: string]: any;
@@ -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 {
     /**
@@ -573,7 +578,7 @@ export interface TabCellRef {
 }
 export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
     prefixCls?: string;
-    panes: ReactNodeArray;
+    panes: ReactNode[];
     activeIndex: number;
     activeIndexRef: React.MutableRefObject<number>;
     tabDirection: 'horizontal' | 'vertical';

package/umd/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/umd/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/umd/toast/index.d.ts

@@ -185,8 +185,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    toast: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -196,8 +196,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -207,8 +207,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -218,8 +218,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -229,8 +229,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    loading: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };
@@ -240,8 +240,8 @@ declare const _default: React.ForwardRefExoticComponent<ToastProps & React.RefAt
      * @param {string | ToastProps} config Configuration
      * @returns {{ update: (config: ToastProps) => void; close: () => void }}
      */
-    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "loading" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose" | "initialBodyOverflow" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ToastProps & React.RefAttributes<ToastRef>>, "ref" | "className" | "duration" | "content" | "layout" | "icon" | "direction" | "transitionDuration" | "context" | "key" | "type" | "getContainer" | "onClose" | "initialBodyOverflow" | "loading" | "loadingIcon" | "loadingInner" | "disableBodyTouch" | "typeIconMap">) => void;
         close: () => void;
         hide: () => void;
     };

package/umd/toast/index.js

@@ -66,7 +66,7 @@
         direction = _props$direction === void 0 ? 'center' : _props$direction,
         typeIconMap = props.typeIconMap,
         initialBodyOverflow = props.initialBodyOverflow;
-    var closeTimerRef = (0, _react.useRef)();
+    var closeTimerRef = (0, _react.useRef)(undefined);
     var domRef = (0, _react.useRef)(null);
     var wrapDomRef = (0, _react.useRef)(null);
     var isInitialMount = (0, _react.useRef)(false);

package/umd/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/umd/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/umd/transition/index.js

@@ -19,10 +19,15 @@
   _exports.default = Transition;
   _extends2 = _interopRequireDefault(_extends2);
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
-  _react = _interopRequireDefault(_react);
+  _react = _interopRequireWildcard(_react);
   _CSSTransition = _interopRequireDefault(_CSSTransition);
-  var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit"];
+  var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit", "transitionVarType"];
 
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  var DEFAULT_TIMEOUT = 300;
   /**
    * react-transition-group/CSSTransition 的简单封装。
    * @en Simple wrapper for react-transition-group/CSSTransition.
@@ -31,27 +36,52 @@
    * @name 动画过渡
    * @name_en Transition
    */
+
   function Transition(props) {
     var _props$children = props.children,
         children = _props$children === void 0 ? /*#__PURE__*/_react.default.createElement("div", null) : _props$children,
         type = props.type,
         transIn = props.in,
         _props$timeout = props.timeout,
-        timeout = _props$timeout === void 0 ? 300 : _props$timeout,
+        timeout = _props$timeout === void 0 ? DEFAULT_TIMEOUT : _props$timeout,
         _props$mountOnEnter = props.mountOnEnter,
         mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
         _props$unmountOnExit = props.unmountOnExit,
         unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+        transitionVarType = props.transitionVarType,
         restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
-      var prefixCls = _ref.prefixCls;
+    var varPrefix = "builtin-transition-" + (transitionVarType || type); // 计算动画时长，支持对象形式的 timeout
+
+    var getDuration = function getDuration(phase) {
+      if (typeof timeout === 'number') {
+        return timeout;
+      }
+
+      return timeout[phase] || DEFAULT_TIMEOUT;
+    }; // 生成 CSS 变量样式
+
+
+    var cssVariables = (0, _react.useMemo)(function () {
+      var _ref;
+
+      var enterDuration = getDuration('enter');
+      var exitDuration = getDuration('exit');
+      var appearDuration = getDuration('appear');
+      return _ref = {}, _ref["--" + varPrefix + "-enter-duration"] = enterDuration + "ms", _ref["--" + varPrefix + "-exit-duration"] = exitDuration + "ms", _ref["--" + varPrefix + "-appear-duration"] = appearDuration + "ms", _ref;
+    }, [timeout, varPrefix]);
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+      var _props;
+
+      var prefixCls = _ref2.prefixCls;
       return /*#__PURE__*/_react.default.createElement(_CSSTransition.default, (0, _extends2.default)({
         in: transIn,
         timeout: timeout,
         classNames: prefixCls + "-" + type,
         mountOnEnter: mountOnEnter,
         unmountOnExit: unmountOnExit
-      }, restProps), children);
+      }, restProps), /*#__PURE__*/(0, _react.cloneElement)(children, {
+        style: (0, _extends2.default)({}, cssVariables, children == null ? void 0 : (_props = children.props) == null ? void 0 : _props.style)
+      }));
     });
   }
 });

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