@arco-design/mobile-react 2.36.2 → 2.38.0

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/hooks.d.ts

@@ -17,14 +17,14 @@ export declare const useCommonState: ({ onRefresh, loosingMinHeight, }: {
     tipsHeight: number;
 };
 export declare const useAddScrollEvents: ({ domRef, handleTouchStart, handleTouchMove, handleTouchEnd, }: {
-    domRef: RefObject<HTMLDivElement>;
+    domRef: RefObject<HTMLDivElement | null>;
     handleTouchStart: (evt: HTMLElementEventMap['touchstart']) => void;
     handleTouchMove: (evt: HTMLElementEventMap['touchmove']) => void;
     handleTouchEnd: (evt: HTMLElementEventMap['touchend']) => void;
 }) => void;
 export declare const useCheckAsStart: ({ allowPullWhenNotTop, domRef, }: {
     allowPullWhenNotTop: boolean;
-    domRef: RefObject<HTMLDivElement>;
+    domRef: RefObject<HTMLDivElement | null>;
 }) => {
     ifShouldHandle: () => boolean | null;
 };

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/group.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { RadioGroupProps, RadioGroupRef, RadioProps, RadioRef, ValueType } from './type';
 import { GroupContextParams } from '../checkbox';
-export declare const RadioGroupContext: React.Context<GroupContextParams<string | number>>;
+export declare const RadioGroupContext: React.Context<GroupContextParams<React.ReactText>>;
 export declare function componentGenerator<T extends ValueType = ValueType, P extends RadioProps<T> = RadioProps<T>, R extends RadioRef = RadioRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<RadioGroupProps<T, P> & React.RefAttributes<RadioGroupRef>>;

package/esm/radio/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export * from './type';
-declare const _default: import("react").ForwardRefExoticComponent<import("./type").RadioProps<string | number> & import("react").RefAttributes<import("./type").RadioRef>> & {
-    Group: import("react").ForwardRefExoticComponent<import("./type").RadioGroupProps<string | number, import("./type").RadioProps<string | number> & import("react").RefAttributes<import("./type").RadioRef>> & import("react").RefAttributes<import("./type").RadioGroupRef>> & {
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").RadioProps<import("react").ReactText> & import("react").RefAttributes<import("./type").RadioRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").RadioGroupProps<import("react").ReactText, import("./type").RadioProps<import("react").ReactText> & import("react").RefAttributes<import("./type").RadioRef>> & import("react").RefAttributes<import("./type").RadioGroupRef>> & {
         displayName?: string | undefined;
     };
 } & {

package/esm/radio/radio.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import { CheckboxProps, CheckboxRef } from '../checkbox';
 import { RadioProps, RadioRef, ValueType } from './type';
 export declare function componentGenerator<T extends ValueType = ValueType, P extends CheckboxProps<T> = CheckboxProps<T>, R extends CheckboxRef = CheckboxRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<RadioProps<T> & React.RefAttributes<RadioRef>>;
-export declare const Radio: React.ForwardRefExoticComponent<RadioProps<string | number> & React.RefAttributes<RadioRef>>;
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps<React.ReactText> & React.RefAttributes<RadioRef>>;

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/elements.js

@@ -170,7 +170,9 @@ export var SkeletonParagraph = /*#__PURE__*/forwardRef(function (props, ref) {
         backgroundColor: backgroundColor
       },
       ref: function ref(el) {
-        return el && (lineDomRefs.current[idx] = el);
+        if (el) {
+          lineDomRefs.current[idx] = el;
+        }
       }
     }, isGradientAnimation && offsets !== undefined && /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-skeleton-animation-item",
@@ -256,7 +258,9 @@ export var SkeletonGrid = /*#__PURE__*/forwardRef(function (props, ref) {
         backgroundColor: backgroundColor
       },
       ref: function ref(el) {
-        return el && (iconDomRefs.current[idx] = el);
+        if (el) {
+          iconDomRefs.current[idx] = el;
+        }
       }
     }, isGradientAnimation && iconOffsets !== undefined && /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-skeleton-animation-item",
@@ -269,7 +273,9 @@ export var SkeletonGrid = /*#__PURE__*/forwardRef(function (props, ref) {
         backgroundColor: backgroundColor
       },
       ref: function ref(el) {
-        return el && (textDomRefs.current[idx] = el);
+        if (el) {
+          textDomRefs.current[idx] = el;
+        }
       }
     }, isGradientAnimation && textOffsets !== undefined && /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-skeleton-animation-item",

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/hooks/index.d.ts

@@ -5,7 +5,7 @@ export declare type LinePosition = {
     length: number;
     start: number;
 };
-export declare const SliderContext: React.Context<Required<Pick<SliderProps, "max" | "disabled" | "style" | "size" | "step" | "type" | "className" | "onChange" | "onAfterChange" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks" | "renderThumbPopover">>;
+export declare const SliderContext: React.Context<Required<Pick<SliderProps, "className" | "style" | "disabled" | "step" | "size" | "type" | "onChange" | "onAfterChange" | "max" | "min" | "suffixLabel" | "prefixLabel" | "useRange" | "useAnimation" | "showTooltip" | "showMarks" | "useMarkOnly" | "draggableTrackOnly" | "formatTooltip" | "renderThumb">> & Pick<SliderProps, "value" | "defaultValue" | "marks" | "renderThumbPopover">>;
 export * from './useSliderIcon';
 export * from './useSliderInit';
 export * from './useSliderStyle';

package/esm/slider/hooks/useSliderEvents.d.ts

@@ -7,7 +7,7 @@ declare enum IsTouchingStatus {
 }
 export declare const useSliderEvents: ({ getLinePosition, lineRef, valueGroup, setValueGroup, setCommonIsTouching, }: {
     getLinePosition: () => LinePosition;
-    lineRef: RefObject<HTMLDivElement>;
+    lineRef: RefObject<HTMLDivElement | null>;
     valueGroup: number | number[];
     setValueGroup: React.Dispatch<React.SetStateAction<number | [number, number]>>;
     setCommonIsTouching: React.Dispatch<React.SetStateAction<number>>;

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/hooks/useValue.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import { StepperProps } from '..';
 export default function useValue(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> & Pick<StepperProps, 'formatter' | 'value'>): {
     updateValue: (updater: number | ((oldValue: number) => number)) => void;
     actualInputValue: number;
-    showValue: string | number;
+    showValue: import("react").ReactText;
     innerValue: number;
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current" | "reverseOrder"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "status" | "direction" | "align" | "iconType" | "current" | "reverseOrder"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

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;