@arco-design/mobile-react 2.36.2 → 2.38.0

package/umd/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>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "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>>, "direction" | "children" | "ref" | "key" | "context" | "translateZ" | "className" | "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/umd/popup-swiper/index.js

@@ -22,7 +22,7 @@
   _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
   _react = _interopRequireWildcard(_react);
   _popup = _interopRequireDefault(_popup);
-  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"];
 
   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); }
 
@@ -51,6 +51,16 @@
         _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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
     var _useState = (0, _react.useState)(visible),
@@ -199,7 +209,12 @@
         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;
@@ -264,7 +279,9 @@
         maskStyle: (0, _extends2.default)({}, maskStyle || {}, {
           opacity: percent ? 1 - percent : void 0
         }),
-        contentStyle: getContentStyle()
+        contentStyle: getContentStyle(),
+        maskTransitionTimeout: maskTransitionTimeout,
+        contentTransitionTimeout: contentTransitionTimeout
       }, otherProps), children);
     });
   });

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

@@ -191,7 +191,9 @@
           backgroundColor: backgroundColor
         },
         ref: function ref(el) {
-          return el && (lineDomRefs.current[idx] = el);
+          if (el) {
+            lineDomRefs.current[idx] = el;
+          }
         }
       }, isGradientAnimation && offsets !== undefined && /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-skeleton-animation-item",
@@ -279,7 +281,9 @@
           backgroundColor: backgroundColor
         },
         ref: function ref(el) {
-          return el && (iconDomRefs.current[idx] = el);
+          if (el) {
+            iconDomRefs.current[idx] = el;
+          }
         }
       }, isGradientAnimation && iconOffsets !== undefined && /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-skeleton-animation-item",
@@ -292,7 +296,9 @@
           backgroundColor: backgroundColor
         },
         ref: function ref(el) {
-          return el && (textDomRefs.current[idx] = el);
+          if (el) {
+            textDomRefs.current[idx] = el;
+          }
         }
       }, isGradientAnimation && textOffsets !== undefined && /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-skeleton-animation-item",

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

@@ -389,13 +389,14 @@
         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;
@@ -528,7 +529,10 @@
         renderTabBarInner: renderTabBarInner,
         tabBarStyle: tabBarStyle,
         tabBarClass: tabBarClass,
-        tabBarStopPropagation: tabBarStopPropagation
+        tabBarStopPropagation: tabBarStopPropagation,
+        onUnderlineFirstShow: function onUnderlineFirstShow() {
+          return setCellTrans(true);
+        }
       }, commonProps);
 
       var CellComp = /*#__PURE__*/_react.default.createElement(_tabCell.default, cellProps);

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