@arco-design/mobile-react 2.37.0 → 2.38.1

package/esm/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%;

package/esm/popup-swiper/index.d.ts

@@ -73,11 +73,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
      * @param {string | PopupSwiperProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "ref" | "className" | "children" | "direction" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "ref" | "className" | "children" | "direction" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "ref" | "className" | "children" | "direction" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "ref" | "className" | "children" | "direction" | "context" | "key" | "translateZ" | "getScrollContainer" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "contentTransitionVarType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onPreventTouchMove" | "needBottomOffset" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/popup-swiper/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "visible", "children", "maskStyle", "contentStyle", "direction", "percentToClose", "distanceToClose", "speedToClose", "allowSwipeDirections", "exitDirection", "onTouchMove", "onTouchStart", "onTouchEnd", "onOpen", "onClose", "close"];
+var _excluded = ["className", "visible", "children", "maskStyle", "contentStyle", "direction", "percentToClose", "distanceToClose", "speedToClose", "allowSwipeDirections", "exitDirection", "onTouchMove", "onTouchStart", "onTouchEnd", "onOpen", "onClose", "close", "maskTransitionTimeout", "contentTransitionTimeout"];
 import React, { useRef, forwardRef, useImperativeHandle, useCallback, useState, useEffect, useMemo } from 'react';
 import { cls, componentWrapper, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout, CompWithGlobalContext } from '../context-provider';
@@ -30,6 +30,16 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
       _onOpen = props.onOpen,
       _onClose = props.onClose,
       close = props.close,
+      _props$maskTransition = props.maskTransitionTimeout,
+      maskTransitionTimeout = _props$maskTransition === void 0 ? {
+    enter: 450,
+    exit: 240
+  } : _props$maskTransition,
+      _props$contentTransit = props.contentTransitionTimeout,
+      contentTransitionTimeout = _props$contentTransit === void 0 ? {
+    enter: 450,
+    exit: 240
+  } : _props$contentTransit,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var _useState = useState(visible),
@@ -178,7 +188,12 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
       setDistance({
         direction: 'X',
         value: 0
-      });
+      }); // 动画完成后需重置
+      // @en Reset after animation is complete
+
+      setTimeout(function () {
+        setHasTrans(false);
+      }, Math.max(typeof maskTransitionTimeout === 'number' ? maskTransitionTimeout : (maskTransitionTimeout == null ? void 0 : maskTransitionTimeout.exit) || 0, typeof contentTransitionTimeout === 'number' ? contentTransitionTimeout : (contentTransitionTimeout == null ? void 0 : contentTransitionTimeout.exit) || 0, 240));
     }
 
     touchStartTimeRef.current = 0;
@@ -243,7 +258,9 @@ var PopupSwiper = /*#__PURE__*/forwardRef(function (props, ref) {
       maskStyle: _extends({}, maskStyle || {}, {
         opacity: percent ? 1 - percent : void 0
       }),
-      contentStyle: getContentStyle()
+      contentStyle: getContentStyle(),
+      maskTransitionTimeout: maskTransitionTimeout,
+      contentTransitionTimeout: contentTransitionTimeout
     }, otherProps), children);
   });
 });

package/esm/popup-swiper/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/esm/progress/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/esm/pull-refresh/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/esm/radio/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/esm/rate/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/esm/search-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/esm/skeleton/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/esm/slider/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/esm/stepper/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/esm/steps/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/esm/sticky/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/esm/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/esm/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/esm/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/esm/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/esm/tabs/index.js

@@ -363,13 +363,14 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       cellRef.current && cellRef.current.scrollToCenter();
     }
 
+    setCellTrans(true);
+    setPaneTrans(true);
+
     if (!touchStartedRef.current || posAdjustingRef.current || scrollingRef.current || !touchMovedRef.current) {
       return;
     }
 
     touchStartedRef.current = false;
-    setCellTrans(true);
-    setPaneTrans(true);
     var touchEndTime = new Date().getTime();
     var dis = distanceRef.current;
     var speed = dis / (touchEndTime - touchStartTimeRef.current) * 1000;
@@ -503,7 +504,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       renderTabBarInner: renderTabBarInner,
       tabBarStyle: tabBarStyle,
       tabBarClass: tabBarClass,
-      tabBarStopPropagation: tabBarStopPropagation
+      tabBarStopPropagation: tabBarStopPropagation,
+      onUnderlineFirstShow: function onUnderlineFirstShow() {
+        return setCellTrans(true);
+      }
     }, commonProps);
 
     var CellComp = /*#__PURE__*/React.createElement(TabCell, cellProps);

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

@@ -51,7 +51,8 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
       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 = useContext(GlobalContext),
@@ -130,6 +131,13 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     updateScrollPosition();
   }, [activeIndex, wrapSize]);
+  useEffect(function () {
+    // underline 首次展示时，通知父组件启用 cellTrans
+    // @en When underline is first shown, notify parent component to enable cellTrans
+    if (showLine && onUnderlineFirstShow) {
+      onUnderlineFirstShow();
+    }
+  }, [showLine]);
   useUpdateEffect(function () {
     var _underlineRef$current2;
 

package/esm/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 {
     /**